/* PICKED — page tokens + page-specific styles.
   Loaded after ../css/styles.css: overrides the shared design tokens so
   reused primitives (container, reveal, btn, lang-switch, focus-visible,
   site-header) re-theme automatically, then adds PICKED-only sections. */

:root{
  /* ---- Color tokens (from brand assets: logo-mark.svg / wordmark.svg) ---- */
  --ink: #0b0b0d;
  --panel: #ffffff0d;
  --paper: #f5f5f2;
  --paper-dim: #f5f5f299;
  --paper-faint: #f5f5f24d;
  --deep: #16161a;
  --deep-2: #101013;
  --stone: #8c8c93;
  --line: #f5f5f21f;
  --line-strong: #f5f5f238;
  --current: #d9ff57;
  --current-dim: #d9ff5799;
  --current-ink: #0b0b0d;

  /* ---- Type ---- */
  --font-display: 'Archivo Black', var(--font-body);
  --font-body: 'Inter', ui-sans-serif, system-ui, sans-serif;

  /* ---- Radius ---- */
  --radius-sm: 4px;
  --radius-md: 10px;
}

h1,h2,h3,h4{ font-weight:400; letter-spacing:-0.01em; text-transform:none; }

.btn{ font-family:var(--font-display); font-weight:400; text-transform:uppercase; letter-spacing:0.02em; }
.btn:hover{ color:var(--current-ink); }

.nav-cta{ text-transform:uppercase; letter-spacing:0.04em; font-size:12.5px; }

.kicker{ text-transform:uppercase; letter-spacing:0.14em; font-family:var(--font-body); font-weight:600; font-size:12px; }

/* ================= PICKED HEADER ================= */
.picked-header{
  position:fixed; top:0; left:0; right:0; z-index:100;
  padding:18px var(--gutter);
  display:flex; align-items:center; justify-content:space-between; gap:20px;
  transition:background var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease), padding var(--dur-fast) var(--ease);
  border-bottom:1px solid transparent;
}
.picked-header.scrolled{
  background:rgba(11,11,13,0.86);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  border-bottom-color:var(--line);
  padding-top:13px; padding-bottom:13px;
}
.picked-brand{ display:flex; align-items:center; gap:12px; }
.picked-brand img{ height:26px; width:auto; display:block; border-radius:4px; }
.picked-brand .origin{
  font-size:11.5px; color:var(--stone); letter-spacing:0.06em;
  padding-left:12px; border-left:1px solid var(--line-strong);
  display:none;
}
.picked-brand .origin a{ color:var(--stone); transition:color var(--dur-fast) var(--ease); }
.picked-brand .origin a:hover{ color:var(--paper); }

.picked-nav{ display:flex; align-items:center; gap:28px; }
.picked-nav a.nav-link{ font-size:13.5px; color:var(--paper-dim); position:relative; transition:color var(--dur-fast) var(--ease); }
.picked-nav a.nav-link:hover{ color:var(--paper); }
.picked-nav a.nav-link::after{
  content:''; position:absolute; left:0; right:0; bottom:-4px; height:1px;
  background:var(--current); transform:scaleX(0); transform-origin:left;
  transition:transform var(--dur-fast) var(--ease);
}
.picked-nav a.nav-link:hover::after{ transform:scaleX(1); }

/* ================= HERO ================= */
.picked-hero{
  min-height:100svh;
  display:flex; flex-direction:column; justify-content:center;
  padding-top:120px; padding-bottom:var(--section-pad);
  overflow:hidden;
  position:relative;
}
#picked-field{
  position:absolute; inset:0; z-index:0;
  width:100%; height:100%;
  touch-action:none;
}
.picked-hero-inner{ position:relative; z-index:2; pointer-events:none; }
.picked-hero-inner > *{ pointer-events:auto; }
.picked-eyebrow{
  display:flex; align-items:center; gap:10px;
  font-size:12.5px; color:var(--stone); letter-spacing:0.1em; text-transform:uppercase;
  margin-bottom:26px;
}
.picked-eyebrow .dot{ width:6px; height:6px; border-radius:50%; background:var(--current); box-shadow:0 0 12px 2px var(--current-dim); }

.picked-hero h1{
  font-family:var(--font-display);
  font-size:clamp(2.6rem, 7.4vw, 6.4rem);
  line-height:0.96;
  max-width:20ch;
  text-transform:uppercase;
}
.picked-hero h1 .line{ display:block; }
.picked-hero h1 .accent{ color:var(--current); }

.picked-hero-sub{
  margin-top:30px; max-width:46ch;
  font-size:clamp(1.05rem, 1.6vw, 1.25rem);
  color:var(--paper-dim);
}
.picked-hero-actions{ margin-top:40px; display:flex; align-items:center; gap:24px; flex-wrap:wrap; width:fit-content; max-width:100%; }

.picked-callout{
  position:absolute; z-index:3; left:50%; top:50%;
  transform:translate(-50%,-50%) scale(0.7);
  font-family:var(--font-display); text-transform:uppercase;
  font-size:clamp(1.4rem, 3vw, 2.4rem);
  color:var(--current);
  opacity:0; pointer-events:none;
  transition:opacity .35s var(--ease), transform .35s var(--ease);
  text-align:center;
  text-shadow:0 0 30px rgba(217,255,87,0.35);
}
.picked-callout.is-active{ opacity:1; transform:translate(-50%,-50%) scale(1); }

.picked-hero-hint{
  position:absolute; left:var(--gutter); bottom:40px; z-index:2;
  font-size:12px; letter-spacing:0.05em; color:var(--stone);
  display:flex; align-items:center; gap:8px;
}
@media (hover:none){ .picked-hero-hint .hover-only{ display:none; } }
@media (hover:hover){ .picked-hero-hint .touch-only{ display:none; } }

/* ================= PLAYERS ("who's up") ================= */
.picked-players{ padding:var(--section-pad) 0; border-top:1px solid var(--line); }
.player-row{
  display:flex; flex-wrap:wrap; gap:clamp(20px,4vw,44px);
  margin-top:clamp(40px,6vw,72px);
  justify-content:flex-start;
}
.player-node{
  display:flex; flex-direction:column; align-items:center; gap:14px;
  width:112px;
}
.player-node .ring{
  width:84px; height:84px; border-radius:50%;
  border:1.5px solid var(--line-strong);
  display:flex; align-items:center; justify-content:center;
  transition:border-color .5s var(--ease), background .5s var(--ease), transform .5s var(--ease), box-shadow .5s var(--ease);
}
.player-node .ring::before{
  content:''; width:10px; height:10px; border-radius:50%; background:var(--stone);
  transition:background .5s var(--ease), transform .5s var(--ease);
}
.player-node label{ font-size:11.5px; letter-spacing:0.08em; text-transform:uppercase; color:var(--stone); }
.player-node.is-picked .ring{
  border-color:var(--current); background:var(--current); transform:scale(1.12);
  box-shadow:0 0 34px 4px var(--current-dim);
}
.player-node.is-picked .ring::before{ background:var(--ink); transform:scale(1.5); }
.player-node.is-picked label{ color:var(--current); }

/* ================= HOW IT WORKS ================= */
.picked-how{ padding:var(--section-pad) 0; border-top:1px solid var(--line); }
.how-grid{
  display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(24px,3vw,40px);
  margin-top:clamp(40px,6vw,72px);
}
.how-step{ border-top:1px solid var(--line-strong); padding-top:22px; }
.how-step .index{ font-family:var(--font-display); font-size:14px; color:var(--current); display:block; margin-bottom:16px; }
.how-step h3{ font-size:1.15rem; margin-bottom:10px; text-transform:none; }
.how-step p{ font-size:14.5px; color:var(--paper-dim); max-width:26ch; }

/* ================= GAME MODES ================= */
.picked-modes{ padding:var(--section-pad) 0; border-top:1px solid var(--line); }
.mode-track{
  display:flex; gap:20px; margin-top:clamp(40px,6vw,72px);
  overflow-x:auto; padding-bottom:8px; scroll-snap-type:x proximity;
  scrollbar-width:thin;
}
.mode-card{
  flex:0 0 auto; width:min(78vw,320px); scroll-snap-align:start;
  border:1px solid var(--line-strong); border-radius:var(--radius-md);
  padding:28px; display:flex; flex-direction:column; gap:16px;
  background:linear-gradient(180deg, var(--panel), transparent);
  transition:border-color var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
}
.mode-card:hover{ border-color:var(--mode-color, var(--current)); transform:translateY(-4px); }
.mode-card .mode-dot{ width:16px; height:16px; border-radius:50%; background:var(--mode-color, var(--current)); }
.mode-card .mode-tag{ font-size:11px; letter-spacing:0.08em; text-transform:uppercase; color:var(--mode-color, var(--current)); }
.mode-card h3{ font-family:var(--font-display); font-size:1.5rem; text-transform:uppercase; }
.mode-card p{ font-size:14px; color:var(--paper-dim); }
.mode-card.is-core{ border-color:var(--current); }

/* ================= THE MOMENT ================= */
.picked-moment{
  padding:calc(var(--section-pad) * 1.2) 0;
  border-top:1px solid var(--line);
  display:flex; flex-direction:column; align-items:center; text-align:center; gap:10px;
}
.picked-moment .m-line{
  font-family:var(--font-display); text-transform:uppercase;
  line-height:1.05; color:var(--paper-dim);
}
.picked-moment .m-line:nth-child(1){ font-size:clamp(1.2rem,3vw,1.8rem); color:var(--stone); }
.picked-moment .m-line:nth-child(2){ font-size:clamp(1.8rem,4.5vw,3.2rem); color:var(--paper); }
.picked-moment .m-line:nth-child(3){ font-size:clamp(3rem,9vw,7rem); color:var(--current); margin-top:8px; }

/* ================= APP EXPERIENCE ================= */
.picked-app{ padding:var(--section-pad) 0; border-top:1px solid var(--line); }
.app-frames{
  display:flex; flex-direction:column; align-items:center; gap:28px;
  margin-top:clamp(40px,6vw,72px);
}
.app-carousel{
  position:relative; width:100%;
  height:clamp(340px, 42vw, 430px);
  display:flex; align-items:center; justify-content:center;
  touch-action:pan-y;
  outline:none;
  cursor:grab;
}
.app-carousel:active{ cursor:grabbing; }
.app-carousel:focus-visible{ box-shadow:inset 0 0 0 2px var(--current); border-radius:12px; }

.app-frame{
  appearance:none; -webkit-appearance:none; border:none; margin:0; font:inherit; color:inherit;
  cursor:pointer; text-align:left;
  position:absolute; top:50%; left:50%;
  width:206px; aspect-ratio:9/18.5;
  border:1.5px solid var(--line-strong); border-radius:22px;
  padding:14px; display:flex; flex-direction:column; gap:10px;
  background:var(--deep);
  transition:transform .55s cubic-bezier(.22,.61,.36,1), opacity .5s var(--ease), border-color .35s var(--ease), box-shadow .45s var(--ease);
  will-change:transform;
}
.app-frame:focus-visible{ outline:2px solid var(--current); outline-offset:4px; }

.app-frame[data-slot="center"]{
  transform:translate(-50%,-50%) scale(1.1);
  border-color:var(--current);
  opacity:1; z-index:3;
  box-shadow:0 24px 60px rgba(0,0,0,.5);
  cursor:default;
}
.app-frame[data-slot="left"]{ transform:translate(-50%,-50%) translateX(-166px) scale(0.84); opacity:0.45; z-index:2; }
.app-frame[data-slot="right"]{ transform:translate(-50%,-50%) translateX(166px) scale(0.84); opacity:0.45; z-index:2; }
.app-frame[data-slot="left"]:hover, .app-frame[data-slot="right"]:hover{ opacity:0.75; border-color:var(--line-strong); }
.app-frame[data-slot="hidden"]{ transform:translate(-50%,-50%) scale(0.7); opacity:0; z-index:1; pointer-events:none; }

.app-frame .screen-label{ font-size:9.5px; letter-spacing:0.08em; text-transform:uppercase; color:var(--stone); }
.app-frame .screen-body{ flex:1; border-radius:14px; background:var(--deep-2); position:relative; overflow:hidden; display:block; }
.app-frame .screen-body img{ width:100%; height:100%; object-fit:cover; display:block; pointer-events:none; }

.app-dots{ display:flex; align-items:center; gap:10px; }
.app-dot{
  appearance:none; -webkit-appearance:none; border:none; padding:0; margin:0;
  width:7px; height:7px; border-radius:50%;
  background:var(--line-strong); cursor:pointer;
  transition:background var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
}
.app-dot:hover{ background:var(--stone); }
.app-dot.is-active{ background:var(--current); transform:scale(1.4); }
.app-dot:focus-visible{ outline:2px solid var(--current); outline-offset:3px; }

/* ================= STUDIO CONNECTION ================= */
.picked-studio{
  padding:var(--section-pad) 0; border-top:1px solid var(--line);
  display:flex; align-items:center; justify-content:space-between; gap:32px; flex-wrap:wrap;
}
.studio-mark{ display:flex; align-items:center; gap:14px; }
.studio-mark .dot{ width:9px; height:9px; border-radius:50%; background:var(--current); }
.studio-mark span{ font-size:14px; color:var(--paper-dim); }
.studio-link{
  font-size:14px; font-family:var(--font-body); font-weight:600;
  display:inline-flex; align-items:center; gap:8px; color:var(--paper);
  border-bottom:1px solid var(--line-strong); padding-bottom:3px;
  transition:border-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.studio-link:hover{ color:var(--current); border-color:var(--current); }

/* ================= FINAL CTA ================= */
.picked-final{
  padding:var(--section-pad) 0; border-top:1px solid var(--line);
  text-align:center; display:flex; flex-direction:column; align-items:center;
}
.picked-final h2{
  font-family:var(--font-display); text-transform:uppercase;
  font-size:clamp(2.2rem, 6.5vw, 4.6rem); max-width:16ch; line-height:1.02;
}
.picked-final p{ margin-top:22px; color:var(--paper-dim); font-size:1.05rem; max-width:42ch; }
.picked-final .picked-hero-actions{ justify-content:center; margin-top:38px; }

/* ================= FOOTER ================= */
.picked-footer{ border-top:1px solid var(--line); padding:calc(var(--section-pad) * 0.6) 0 32px; }
.picked-footer-top{
  display:flex; justify-content:space-between; align-items:flex-start; gap:32px; flex-wrap:wrap;
  padding-bottom:36px;
}
.picked-footer-brand img{ height:24px; border-radius:4px; margin-bottom:12px; }
.picked-footer-brand p{ color:var(--stone); font-size:13px; max-width:30ch; }
.picked-footer-nav{ display:flex; gap:28px; flex-wrap:wrap; }
.picked-footer-nav a{ font-size:13.5px; color:var(--paper-dim); transition:color var(--dur-fast) var(--ease); }
.picked-footer-nav a:hover{ color:var(--current); }
.picked-footer-bottom{
  border-top:1px solid var(--line); padding-top:22px;
  display:flex; justify-content:space-between; flex-wrap:wrap; gap:12px;
  color:var(--stone); font-size:12.5px;
}
.picked-footer-copy{ display:flex; gap:12px; flex-wrap:wrap; }
.picked-footer-legal{ display:flex; align-items:center; gap:6px; flex-wrap:wrap; }
.legal-link{ color:var(--stone); transition:color var(--dur-fast) var(--ease); }
.legal-link:hover{ color:var(--paper-dim); }

/* ================= RESPONSIVE ================= */
@media (max-width:900px){
  .picked-nav{ display:none; }
  .picked-brand .origin{ display:inline; }
  .how-grid{ grid-template-columns:repeat(2,1fr); row-gap:32px; }
  .picked-studio{ flex-direction:column; align-items:flex-start; }
}
@media (max-width:560px){
  .picked-hero{ padding-top:100px; }
  .how-grid{ grid-template-columns:1fr; }
  .app-carousel{ height:clamp(320px, 92vw, 380px); }
  .app-frame{ width:36vw; }
  .app-frame[data-slot="left"]{ transform:translate(-50%,-50%) translateX(-30vw) scale(0.8); }
  .app-frame[data-slot="right"]{ transform:translate(-50%,-50%) translateX(30vw) scale(0.8); }
}