/* ==========================================================================
   IVIZHIN DARTS — marketing site
   Design tokens pulled directly from the live app (app.ivizhindarts.com):
   Chakra Petch for UI, Russo One for display numerals/headlines,
   near-black navy background, neon multi-color accent system.
   ========================================================================== */

:root {
  --bg0:      #040716;
  --bg1:      #070b22;
  --bg2:      #0b1130;
  --text:     #eaf0ff;
  --muted:    #8e9bc4;
  --muted-2:  #5f6a95;
  --edge:     rgba(120,160,255,.26);
  --edge-soft:rgba(120,160,255,.14);

  --blue:     #2f7bff;
  --cyan:     #39d5ff;
  --red:      #ff2d55;
  --gold:     #ffc53d;
  --magenta:  #ff4fb4;
  --emerald:  #2ee6a0;
  --sky:      #3fc8ff;
  --orange:   #ff8a3d;
  --violet:   #a98bff;
  --lime:     #b8f040;
  --silver:   #dfe6ff;

  --ui:  'Chakra Petch', 'Segoe UI', system-ui, sans-serif;
  --num: 'Russo One', 'Arial Black', Impact, sans-serif;

  --gutter:  clamp(1.25rem, 5vw, 5rem);
  --measure: 42rem;
  --radius:  14px;
  --radius-sm: 10px;
}

*, *::before, *::after { box-sizing: border-box; }
/* Anything that sets its own display beats the browser's [hidden] rule, and then hiding it silently does
   nothing — the help panel's X set hidden and the panel stayed open, because .hlp-panel is display:flex
   (Cory, 2026-09-17). Say it once, loudly, so hidden means hidden everywhere on this site. */
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

body {
  margin: 0;
  background: var(--bg0);
  color: var(--text);
  font-family: var(--ui);
  font-size: 1.0625rem;
  line-height: 1.6;
  overflow-x: hidden;
}

img, svg { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }

h1, h2, h3 { font-family: var(--num); font-weight: 400; line-height: 1.1; margin: 0 0 .5em; letter-spacing: .01em; }
h1 { font-size: clamp(2.4rem, 6.4vw, 4.6rem); }
h2 { font-size: clamp(1.8rem, 4.2vw, 2.9rem); }
h3 { font-size: 1.15rem; font-family: var(--ui); font-weight: 700; }
p  { margin: 0 0 1em; }

.wrap { max-width: 74rem; margin: 0 auto; padding: 0 var(--gutter); }
.measure { max-width: var(--measure); }

.kicker {
  display: inline-flex; align-items: center; gap: .5em;
  color: var(--cyan); font-weight: 700; letter-spacing: .16em;
  text-transform: uppercase; font-size: .78rem; margin-bottom: .9rem;
}
.kicker::before {
  content: ""; width: 1.4em; height: 2px; background: currentColor; border-radius: 2px;
}
.section-lead { color: var(--muted); font-size: 1.05rem; margin-top: .4rem; }
.accent-text { color: var(--cyan); }

/* ---- buttons -------------------------------------------------------- */
.cta {
  display: inline-flex; align-items: center; gap: .55rem;
  font-family: var(--ui); font-weight: 700; font-size: .98rem;
  padding: .85rem 1.5rem; border-radius: 999px;
  border: 1px solid transparent; cursor: pointer;
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease, border-color .15s ease;
}
.cta svg { width: 1.1em; height: 1.1em; flex: none; }
.cta-primary {
  background: linear-gradient(135deg, var(--blue), var(--cyan));
  color: #051022;
  box-shadow: 0 10px 30px -10px rgba(47,123,255,.55);
}
.cta-primary:hover { transform: translateY(-2px); box-shadow: 0 14px 34px -8px rgba(57,213,255,.55); }
.cta-ghost {
  background: rgba(234,240,255,.04);
  border-color: var(--edge);
  color: var(--text);
}
.cta-ghost:hover { border-color: var(--cyan); color: var(--cyan); }
.cta-large { padding: 1.05rem 2rem; font-size: 1.08rem; }

/* ---- header ----------------------------------------------------------- */
.site-head {
  position: sticky; top: 0; z-index: 50;
  background: rgba(4,7,22,.82);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--edge-soft);
}
.head-wrap {
  display: flex; align-items: center; gap: 1.5rem;
  padding-top: .85rem; padding-bottom: .85rem;
}
.brand { display: flex; align-items: center; gap: .6rem; }
.brand-mark { width: 30px; height: 30px; flex: none; }
.brand-text {
  font-family: var(--num); font-size: 1.05rem; letter-spacing: .04em;
  color: var(--text);
}
.brand-text b { color: var(--cyan); }

.site-nav { margin-left: auto; display: flex; align-items: center; gap: 1.9rem; }
.site-nav a:not(.nav-cta) {
  color: var(--muted); font-weight: 600; font-size: .95rem;
  transition: color .15s ease;
}
.site-nav a:not(.nav-cta):hover { color: var(--text); }
.nav-cta {
  font-family: var(--ui); font-weight: 700; font-size: .9rem;
  padding: .55rem 1.15rem; border-radius: 999px;
  background: linear-gradient(135deg, var(--blue), var(--cyan));
  color: #051022;
}

.nav-toggle {
  display: none; flex-direction: column; justify-content: center; gap: 5px;
  width: 38px; height: 38px; margin-left: auto;
  background: none; border: 1px solid var(--edge); border-radius: 8px; cursor: pointer;
}
.nav-toggle span { height: 2px; width: 18px; background: var(--text); margin: 0 auto; border-radius: 2px; transition: transform .2s ease, opacity .2s ease; }
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ---- hero --------------------------------------------------------------- */
.hero { position: relative; padding: clamp(4rem, 11vw, 7.5rem) 0 clamp(3rem, 8vw, 5rem); overflow: hidden; }
.hero-bg { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
/* The mark itself, huge and faint, turning slowly behind the headline. */
.hero-rings {
  position: absolute; top: 50%; left: 50%;
  width: min(104vw, 1000px); height: min(104vw, 1000px);
  transform: translate(-50%, -50%);
  opacity: .13;
  filter: drop-shadow(0 0 60px rgba(47,123,255,.35));
  animation: spin 160s linear infinite;
}
@keyframes spin { to { transform: translate(-50%, -50%) rotate(360deg); } }
.glow { position: absolute; border-radius: 50%; filter: blur(90px); opacity: .35; }
.glow-a { width: 480px; height: 480px; top: -160px; right: -120px; background: var(--blue); }
.glow-b { width: 420px; height: 420px; bottom: -180px; left: -140px; background: var(--magenta); opacity: .22; }

.hero-wrap { position: relative; z-index: 1; text-align: center; }
.hero .lead {
  max-width: 38rem; margin: 0 auto 2.2rem; color: var(--muted); font-size: 1.12rem;
}
.hero-ctas { display: flex; align-items: center; justify-content: center; gap: 1rem; flex-wrap: wrap; margin-bottom: 3.2rem; }

.hero-stats {
  list-style: none; margin: 0 auto; padding: 0; max-width: 44rem;
  display: grid; grid-template-columns: repeat(4, 1fr);
  border: 1px solid var(--edge); border-radius: var(--radius);
  background: rgba(234,240,255,.03);
}
.hero-stats li {
  padding: 1.1rem .5rem; text-align: center;
  border-right: 1px solid var(--edge-soft);
}
.hero-stats li:last-child { border-right: none; }
.hero-stats .num { display: block; font-family: var(--num); font-size: clamp(1.3rem, 3vw, 1.8rem); color: var(--cyan); }
.hero-stats .label { display: block; font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin-top: .25rem; }

/* ---- games -------------------------------------------------------------- */
.games { padding: clamp(3.5rem, 8vw, 6rem) 0; }
/* Three big cards across on a desktop; two on a tablet, one on a phone. */
.game-grid {
  margin-top: 2.4rem;
  display: grid; gap: 1.2rem;
  grid-template-columns: repeat(5, minmax(0, 1fr));
}
@media (max-width: 1440px) { .game-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 1180px) { .game-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px)  { .game-grid { grid-template-columns: 1fr; } }
.game-card {
  background: linear-gradient(180deg, rgba(234,240,255,.045), rgba(234,240,255,.015));
  border: 1px solid var(--edge); border-radius: var(--radius);
  padding: 1.5rem 1.4rem;
  position: relative; overflow: hidden;
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.game-card::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 3px;
  background: var(--c, var(--cyan));
}
.game-card:hover {
  transform: translateY(-4px);
  border-color: var(--c, var(--cyan));
  box-shadow: 0 16px 34px -18px var(--c, var(--cyan));
}
.game-icon { font-size: 1.6rem; display: block; margin-bottom: .6rem; }
/* A picture from one of the category's games, straight out of the app. */
.cat-art { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 12px;
  border: 1px solid var(--edge); margin-bottom: .9rem; background: #060a22; }
.game-card h3 { margin-bottom: .3rem; }
.game-sub { color: var(--c, var(--cyan)); font-size: .82rem; font-weight: 700; letter-spacing: .02em; margin-bottom: .6rem; }
.game-desc { color: var(--muted); font-size: .92rem; margin: 0; }

/* ---- features / bento ---------------------------------------------------- */
.features { padding: clamp(3.5rem, 8vw, 6rem) 0; background: var(--bg1); border-top: 1px solid var(--edge-soft); border-bottom: 1px solid var(--edge-soft); }
.feature-grid {
  margin-top: 2.4rem;
  display: grid; gap: 1.1rem;
  grid-template-columns: repeat(3, 1fr);
}
.feature-tile {
  background: rgba(234,240,255,.03);
  border: 1px solid var(--edge); border-radius: var(--radius);
  padding: 1.6rem;
}
.feature-wide { grid-column: span 3; display: grid; grid-template-columns: 88px 1fr; gap: 1.6rem; align-items: center; }
.feature-badge { width: 88px; height: 74px; flex: none; }
.feature-tile:not(.feature-wide) .feature-badge { width: 56px; height: 56px; margin-bottom: 1rem; }
.feature-wide-body { min-width: 0; }
.feature-tile h3 { margin-bottom: .4rem; }
.feature-tile p { color: var(--muted); font-size: .93rem; margin: 0; }
.feature-tile p + p { margin-top: .6rem; }
/* The one line on a tile worth reading if you read nothing else. */
.feature-tile .feature-note { margin-top: .75rem; padding-top: .7rem; border-top: 1px solid var(--edge-soft);
  color: var(--cyan); font-weight: 700; font-size: .88rem; }
.feature-wide p { font-size: 1rem; }

/* ---- roadmap -------------------------------------------------------------- */
.roadmap { padding: clamp(3.5rem, 8vw, 6rem) 0; }
.timeline { margin-top: 2.6rem; display: grid; gap: 1.4rem; grid-template-columns: repeat(3, 1fr); position: relative; }
.tl-item { position: relative; padding-left: 1.6rem; border-left: 2px solid var(--edge); }
.tl-dot { position: absolute; left: -7px; top: 2px; width: 12px; height: 12px; border-radius: 50%; background: var(--muted-2); }
.tl-now .tl-dot { background: var(--emerald); box-shadow: 0 0 0 4px rgba(46,230,160,.18); }
.tl-next .tl-dot { background: var(--cyan); box-shadow: 0 0 0 4px rgba(57,213,255,.18); }
.tl-future .tl-dot { background: var(--violet); box-shadow: 0 0 0 4px rgba(169,139,255,.18); }
.tl-tag { display: inline-block; font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; font-weight: 700; color: var(--muted); margin-bottom: .5rem; }
.tl-now .tl-tag { color: var(--emerald); }
.tl-next .tl-tag { color: var(--cyan); }
.tl-future .tl-tag { color: var(--violet); }
.tl-body h3 { margin-bottom: .4rem; }
.tl-body p { color: var(--muted); font-size: .92rem; margin: 0; }

/* ---- heritage -------------------------------------------------------------- */
.heritage { padding: clamp(3rem, 7vw, 4.5rem) 0; background: var(--bg2); }
.heritage-quote {
  max-width: 46rem; margin: 0 auto; text-align: center;
  font-size: clamp(1.1rem, 2.4vw, 1.4rem); line-height: 1.55;
  color: var(--silver); font-style: italic;
}

/* ---- final cta -------------------------------------------------------------- */
.cta-wrap { text-align: center; padding: clamp(4rem, 9vw, 6.5rem) 0; }
.cta-wrap h2 { margin-bottom: 1.8rem; }

/* The closing pitch, next to the thing it is describing: a phone with the game live on it. */
.cta-split { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center; padding: clamp(3.5rem, 8vw, 6rem) 0; }
.cta-copy h2 { margin-bottom: 1rem; }
.cta-lead { color: var(--text); font-size: 1.05rem; margin: 0 0 1.4rem; max-width: 34rem; }
.cta-lead b { color: var(--cyan); }
.cta-points { list-style: none; margin: 0 0 2rem; padding: 0; display: flex; flex-direction: column; gap: .8rem; max-width: 34rem; }
.cta-points li { position: relative; padding-left: 1.6rem; color: var(--muted); font-size: .95rem; line-height: 1.5; }
.cta-points li::before { content: ""; position: absolute; left: 0; top: .5em; width: 8px; height: 8px; border-radius: 50%;
  background: var(--cyan); box-shadow: 0 0 10px var(--cyan); }
.cta-points b { color: var(--text); }

.cta-phone { margin: 0; text-align: center; }
/* Two phones, overlapped the way two phones on a table actually sit. One screen says "it keeps the score";
   two say "it is the board" — which is the claim worth making. The second is smaller and behind, so the
   eye still lands on one of them first. */
/* fit-content, so the box is exactly as wide as the phones in it: centring is then arithmetic rather than
   a guess, and the overlapped one cannot push the box past the edge of a narrow screen. */
/* Room on the right for the second phone to fan out into. It is padding on the pair rather than a negative
   offset on the phone, so the box still contains both and centring stays arithmetic. */
.phone-pair { position: relative; display: flex; justify-content: center; align-items: flex-start;
  width: fit-content; max-width: 100%; margin-inline: auto; padding-right: clamp(0px, 13vw, 182px); }
.phone-frame { width: clamp(220px, 26vw, 310px); margin: 0 auto; padding: 10px; border-radius: 34px;
  background: linear-gradient(160deg, #2b3563, #0b1030); border: 1px solid rgba(140,180,255,.3);
  box-shadow: 0 30px 70px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.14); }
.phone-frame img { display: block; width: 100%; height: auto; border-radius: 25px; }
/* Tilted out from behind the first one, far enough that you can read the screen on it (Cory: "can we also
   have Around the World tilting out from behind it so we can see that cool stats screen also"). It was
   peeking out by an inch and reading as a shadow. Fanned from its own bottom-left corner, so the tilt
   opens away from the phone in front instead of lifting off the floor. */
.phone-frame.phone-back { position: absolute; right: 0; top: clamp(10px, 2.4vw, 30px); z-index: -1; margin: 0;
  width: clamp(192px, 23vw, 284px); padding: 10px; border-radius: 32px; opacity: .97;
  transform: rotate(5deg); transform-origin: 30% 100%;
  box-shadow: 0 26px 60px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.12); }
.phone-frame.phone-back img { border-radius: 21px; }
.cta-phone figcaption { margin-top: 1rem; color: var(--muted-2); font-size: .85rem; }

@media (max-width: 860px) {
  .cta-split { grid-template-columns: 1fr; text-align: center; }
  .cta-lead, .cta-points { margin-left: auto; margin-right: auto; }
  .cta-points li { text-align: left; }
  /* Stacked, the overlap has nothing to lean against and the back phone ends up against the edge of the
     screen. Two phones side by side instead — same point, and both of them fully in shot. */
  .phone-pair { padding-right: 0; gap: 3vw; align-items: center; }
  .phone-frame { width: min(42vw, 260px); }
  .phone-frame.phone-back { position: static; width: min(42vw, 260px); transform: none; opacity: 1;
    padding: 10px; border-radius: 34px; }
  .phone-frame.phone-back img { border-radius: 25px; }
}

/* ---- footer -------------------------------------------------------------- */
.site-foot { border-top: 1px solid var(--edge-soft); padding: 2.4rem 0; }
.foot-wrap { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 2rem; }
.foot-fine { color: var(--muted-2); font-size: .85rem; margin: 0; flex: 1 1 16rem; }
.foot-link { color: var(--cyan); font-weight: 600; font-size: .9rem; }
.foot-link:hover { color: var(--text); }

/* ---- reveal-on-scroll -------------------------------------------------------------- */
[data-reveal] { opacity: 0; transform: translateY(18px); transition: opacity .6s ease, transform .6s ease; }
[data-reveal].is-visible { opacity: 1; transform: none; }

/* ---- small screens -------------------------------------------------------------- */
@media (max-width: 860px) {
  .feature-grid { grid-template-columns: repeat(2, 1fr); }
  .feature-wide { grid-column: span 2; }
  .timeline { grid-template-columns: 1fr; gap: 1.8rem; }
}

@media (max-width: 720px) {
  .site-nav { position: fixed; inset: 62px 0 auto 0; background: var(--bg0); border-bottom: 1px solid var(--edge-soft);
    flex-direction: column; align-items: stretch; gap: 0; padding: .5rem var(--gutter) 1.2rem;
    transform: translateY(-12px); opacity: 0; pointer-events: none; transition: opacity .18s ease, transform .18s ease; }
  .site-nav.is-open { transform: none; opacity: 1; pointer-events: auto; }
  .site-nav a:not(.nav-cta) { padding: .8rem 0; border-bottom: 1px solid var(--edge-soft); }
  .nav-cta { margin-top: 1rem; text-align: center; justify-content: center; }
  .nav-toggle { display: flex; }
  .hero-stats { grid-template-columns: repeat(2, 1fr); }
  .hero-stats li:nth-child(2) { border-right: none; }
  .hero-stats li:nth-child(1), .hero-stats li:nth-child(2) { border-bottom: 1px solid var(--edge-soft); }
  .feature-grid { grid-template-columns: 1fr; }
  .feature-wide { grid-column: span 1; grid-template-columns: 1fr; text-align: left; }
  .feature-badge { width: 60px; height: 50px; }
}

/* ---- category cards link to their game lists ------------------------------ */
a.game-card { display: block; color: inherit; }
.game-more { display: inline-block; margin-top: .9rem; font-size: .85rem; font-weight: 700; letter-spacing: .04em; color: var(--c, var(--cyan)); }
a.game-card:hover .game-more { text-decoration: underline; }

/* ---- category pages ------------------------------------------------------ */
.cat-hero { padding: clamp(3rem, 7vw, 5rem) 0 clamp(1.5rem, 4vw, 2.5rem); border-bottom: 1px solid var(--edge-soft);
  background: radial-gradient(ellipse 60% 80% at 50% 0%, color-mix(in srgb, var(--c) 18%, transparent), transparent 70%); }
.cat-hero .kicker { color: var(--c); }
.crumb { display: table; margin-bottom: 1.4rem; color: var(--muted); font-size: .9rem; font-weight: 600; }
.crumb:hover { color: var(--text); }
.cat-list { padding: clamp(2rem, 5vw, 3.5rem) 0 clamp(3rem, 7vw, 5rem); display: grid; gap: 1.2rem; }
.game-row { display: grid; grid-template-columns: minmax(0, 15rem) minmax(0, 1fr); gap: 1.4rem 2.2rem; padding: 1.6rem 1.6rem 1.5rem; border: 1px solid var(--edge); border-radius: var(--radius);
  background: linear-gradient(180deg, rgba(234,240,255,.045), rgba(234,240,255,.015)); position: relative; overflow: hidden; }
.game-row::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 3px; background: var(--c); }
.game-row h2 { font-size: clamp(1.4rem, 3vw, 1.9rem); margin-bottom: .35rem; }
.game-tagline { color: var(--c); font-weight: 700; font-size: .92rem; margin: 0 0 .9rem; }
.game-facts { list-style: none; margin: 0; padding: 0; display: grid; gap: .35rem; font-size: .88rem; color: var(--muted); }
.game-facts b { color: var(--text); font-weight: 700; }
.game-body p { color: var(--silver); margin: 0 0 .8rem; }
.game-body ul { margin: 0; padding-left: 1.1rem; color: var(--muted); font-size: .93rem; }
.game-body li { margin-bottom: .3rem; }
.game-body li b { color: var(--text); }
/* Each game shows the same picture the app puts on its card, and the whole row opens that game. */
.game-art { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 14px;
  border: 1px solid var(--edge); margin-bottom: .9rem; background: #060a22; }
/* The game rows are not links. This page IS the preview — the description beside the art is the whole
   point of it — and a stretched invisible link over the row sent every stray tap to the app (Cory). */
.game-row:hover { border-color: color-mix(in srgb, var(--c) 45%, var(--edge)); }
.cat-next { display: flex; flex-wrap: wrap; gap: .6rem; justify-content: center; padding-bottom: clamp(3rem, 7vw, 5rem); }
.cat-next a { padding: .55rem 1.1rem; border-radius: 999px; border: 1px solid var(--edge); color: var(--muted); font-weight: 600; font-size: .92rem; }
.cat-next a:hover, .cat-next a.on { color: var(--text); border-color: var(--cyan); }
@media (max-width: 720px) { .game-row { grid-template-columns: 1fr; } }
/* A card that links straight to a game (preorder.html) lands with the game's title clear of the sticky header. */
.game-row { scroll-margin-top: 96px; }

/* ---- preview window ------------------------------------------------------ */
.pv { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; padding: 1rem; }
.pv[hidden] { display: none; }
.pv-back { position: absolute; inset: 0; background: rgba(2,4,14,.86); backdrop-filter: blur(6px); }
.pv-box { position: relative; display: flex; flex-direction: column; gap: .9rem; align-items: center;
  width: min(100%, 60rem); max-height: 94vh; }
.pv-head { display: flex; align-items: center; gap: 1rem; width: 100%; }
.pv-title { font-family: var(--num); font-size: 1.25rem; }
.pv-tools { margin-left: auto; display: flex; gap: .5rem; }
.pv-btn { font: inherit; font-weight: 700; font-size: .9rem; padding: .5rem 1rem; border-radius: 999px; cursor: pointer;
  color: var(--text); background: rgba(234,240,255,.06); border: 1px solid var(--edge); }
.pv-btn.on { color: #051022; background: linear-gradient(135deg, var(--blue), var(--cyan)); border-color: transparent; }
.pv-x { padding: .5rem .8rem; }
.pv-stage { flex: 1; min-height: 0; display: grid; place-items: center; width: 100%; }
/* The device: a dark shell with a screen inside, sized to the shorter of the window's height and width. */
.pv-device { position: relative; background: linear-gradient(160deg, #23283c, #0b0e1a); border-radius: 2.2rem;
  padding: .7rem; box-shadow: 0 30px 80px -20px #000, inset 0 1px 0 rgba(255,255,255,.14);
  transition: width .45s cubic-bezier(.2,.8,.3,1), height .45s cubic-bezier(.2,.8,.3,1); }
.pv-device.phone  { width: min(21rem, 92vw); height: min(43rem, 68vh); }
.pv-device.tablet { width: min(54rem, 94vw); height: min(33rem, 68vh); }
.pv-screen { width: 100%; height: 100%; border-radius: 1.6rem; overflow: hidden; background: #040716; }
.pv-frame { width: 100%; height: 100%; border: 0; display: block; }
.pv-note { color: var(--muted); font-size: .92rem; text-align: center; max-width: 42rem; margin: 0; }
@media (max-width: 620px) { .pv-title { font-size: 1rem; } .pv-btn { padding: .45rem .8rem; font-size: .82rem; } }

/* The small invitation under the lineup. */
.idea-line { margin: 1.6rem auto 0; max-width: 54rem; text-align: center; color: var(--muted); font-size: .88rem; line-height: 1.55; }
.idea-link { color: var(--cyan); font-weight: 700; border-bottom: 1px solid rgba(57,213,255,.4); }
.idea-link:hover { border-bottom-color: var(--cyan); }

/* ---- submit a game idea -------------------------------------------------- */
.idea-wrap { padding-top: clamp(1.6rem, 4vw, 2.6rem); padding-bottom: clamp(3rem, 7vw, 5rem); }
.idea-form { max-width: 44rem; display: flex; flex-direction: column; gap: 1.1rem; }
.idea-field { display: flex; flex-direction: column; gap: .4rem; }
.idea-field > span { font-weight: 700; font-size: 1rem; }
.idea-field small { font-weight: 600; color: var(--muted); margin-left: .4rem; }
.idea-field input, .idea-field textarea {
  font: inherit; color: var(--text); padding: .8rem 1rem; border-radius: 12px;
  background: rgba(4,7,22,.7); border: 1px solid var(--edge); outline: none; resize: vertical;
}
.idea-field input:focus, .idea-field textarea:focus { border-color: var(--cyan); box-shadow: 0 0 0 3px rgba(57,213,255,.18); }
.idea-terms { border: 1px solid var(--edge); border-radius: var(--radius); padding: 1.2rem 1.4rem; background: rgba(234,240,255,.03); }
.idea-terms h2 { font-size: 1.05rem; font-family: var(--ui); font-weight: 700; margin-bottom: .6rem; }
.idea-intro { color: var(--muted); font-size: .92rem; line-height: 1.6; margin: 0 0 .8rem; }
.idea-terms ul { margin: 0; padding-left: 1.1rem; color: var(--muted); font-size: .9rem; line-height: 1.55; }
.idea-terms li { margin-bottom: .5rem; }
.idea-terms b { color: var(--text); }
.idea-agree { display: flex; align-items: flex-start; gap: .6rem; font-weight: 600; font-size: .95rem; }
.idea-agree input { width: 1.15rem; height: 1.15rem; margin-top: .15rem; accent-color: var(--cyan); }
.idea-form .cta { align-self: flex-start; }
.hp { position: absolute; left: -9999px; }

/* ---------- the help agent (js/site.js) ---------- */
.hlp { position: fixed; right: 18px; bottom: 18px; z-index: 60; display: flex; flex-direction: column; align-items: flex-end; gap: 10px; }
.hlp-open { display: inline-flex; align-items: center; gap: 8px; min-height: 48px; padding: 10px 20px; border-radius: 999px; font-weight: 700; font-size: .95rem;
  color: #061225; background: linear-gradient(180deg, #9fe8ff, #39d5ff 60%, #0f97c9); border: none; box-shadow: 0 10px 30px rgba(57,213,255,.35); cursor: pointer; }
.hlp-open svg { width: 20px; height: 20px; }
.hlp.on .hlp-open span { display: none; }
.hlp-panel { width: min(380px, calc(100vw - 36px)); height: min(520px, 70vh); display: flex; flex-direction: column; overflow: hidden;
  border-radius: 20px; background: #0b1230; border: 1px solid var(--edge); box-shadow: 0 30px 80px rgba(0,0,0,.6); }
.hlp-panel header { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; border-bottom: 1px solid var(--edge); }
.hlp-x { background: none; border: 0; color: var(--muted); font-size: 24px; line-height: 1; cursor: pointer; }
.hlp-log { flex: 1; min-height: 0; overflow-y: auto; padding: 14px; display: flex; flex-direction: column; gap: 10px; }
.hlp-msg { max-width: 88%; padding: 9px 13px; border-radius: 14px; font-size: .92rem; line-height: 1.5; }
.hlp-msg.bot { align-self: flex-start; background: rgba(120,160,255,.1); border: 1px solid rgba(120,160,255,.2); color: var(--text); }
.hlp-msg.me { align-self: flex-end; background: linear-gradient(180deg, #2f7bff, #1c5ad0); color: #fff; }
.hlp-msg.thinking { opacity: .6; letter-spacing: .2em; }
.hlp-form { display: flex; gap: 8px; padding: 12px; border-top: 1px solid var(--edge); }
.hlp-in { flex: 1; min-width: 0; min-height: 44px; padding: 8px 14px; border-radius: 12px; font: inherit; font-size: .92rem; color: var(--text);
  background: rgba(4,7,22,.6); border: 1px solid rgba(120,160,255,.3); }
.hlp-go { min-height: 44px; padding: 8px 18px; border-radius: 12px; font: inherit; font-weight: 700; color: #061225; background: var(--cyan); border: 0; cursor: pointer; }
@media (max-width: 520px) { .hlp { right: 12px; bottom: 12px; } }

/* The line under Send the idea, shown only if the submission itself failed. It carries an address to send
   it to, because somebody who has just written four thousand characters should never hit a dead end. */
.idea-error { margin: .2rem 0 0; color: #ff9db3; font-weight: 600; font-size: .92rem; }
.idea-error a { color: #ffd0dc; }

/* ---------- join by phone demo (js/site.js joinDemo) ---------- */
.jd-box { width: min(64rem, 96vw); }
.jd-stage { position: relative; display: flex; align-items: center; justify-content: center; gap: clamp(1rem, 4vw, 3rem); width: 100%; padding: .5rem 0; }
.jd-tablet { width: min(34rem, 56vw); aspect-ratio: 4 / 3; border-radius: 1.6rem; padding: .7rem; background: linear-gradient(160deg, #23283c, #0b0e1a);
  box-shadow: 0 30px 60px -20px rgba(0,0,0,.8), inset 0 0 0 1px rgba(255,255,255,.08); display: flex; flex-direction: column; overflow: hidden; position: relative; }
.jd-tab-head { display: flex; align-items: center; gap: .5rem; padding: .55rem .9rem; border-radius: 1rem 1rem 0 0; background: #070b22; font-family: var(--num); font-size: .85rem; letter-spacing: .04em; }
.jd-tab-head small { margin-left: auto; font-family: var(--ui); color: var(--muted); }
.jd-logo { width: 1rem; height: 1rem; border-radius: 50%; border: 3px solid var(--red); box-shadow: inset 0 0 0 3px #070b22, inset 0 0 0 6px var(--blue); }
.jd-tab-join, .jd-tab-game { flex: 1; min-height: 0; background: radial-gradient(ellipse at 50% 0%, rgba(47,123,255,.22), transparent 60%), #040716; border-radius: 0 0 1rem 1rem; transition: opacity .5s; }
.jd-tab-join { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; padding: 1rem; align-items: center; }
.jd-tab-game { position: absolute; inset: 3.1rem .7rem .7rem; display: grid; place-items: center; opacity: 0; }
.jd-tab-game img { width: 86%; border-radius: .8rem; }
.jd-gamebar { position: absolute; left: 1rem; right: 1rem; bottom: .8rem; display: flex; justify-content: space-between; gap: .5rem; padding: .4rem .8rem; border-radius: 999px; background: rgba(4,7,22,.85); font-size: .8rem; }
.jd-gamebar span { color: var(--gold); }
.jd-qrcard { text-align: center; padding: .9rem; border-radius: 1rem; background: rgba(120,160,255,.08); border: 1px solid var(--edge); }
.jd-qrcard b { display: block; margin-top: .6rem; font-size: .95rem; }
.jd-qrcard small { color: var(--muted); font-size: .75rem; }
.jd-qr { width: min(8.5rem, 100%); margin: 0 auto; border-radius: .5rem; overflow: hidden; }
.jd-qr svg { display: block; width: 100%; }
.jd-eyebrow { font-size: .7rem; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); margin-bottom: .5rem; }
.jd-chip { display: flex; align-items: center; gap: .55rem; padding: .5rem .7rem; margin-bottom: .5rem; border-radius: 999px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.1); font-weight: 700; }
.jd-chip i { display: grid; place-items: center; width: 1.6rem; height: 1.6rem; border-radius: 50%; background: var(--c); color: #1a1000; font-style: normal; font-size: .8rem; }
.jd-chip em { margin-left: auto; font-style: normal; font-size: .68rem; font-weight: 600; color: var(--emerald); }
.jd-new { opacity: 0; transform: translateX(30px) scale(.9); transition: opacity .45s, transform .55s cubic-bezier(.2,1.5,.4,1); }
.jd-phone { flex: none; width: min(15.5rem, 34vw); aspect-ratio: 9 / 19; border-radius: 2.2rem; padding: .55rem; background: linear-gradient(160deg, #23283c, #0b0e1a);
  box-shadow: 0 30px 60px -20px rgba(0,0,0,.85), inset 0 0 0 1px rgba(255,255,255,.1); }
.jd-screen { position: relative; width: 100%; height: 100%; border-radius: 1.7rem; overflow: hidden; background: #040716; }
.jd-scr { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .6rem; padding: 1.2rem 1rem; text-align: center;
  opacity: 0; transform: translateY(12px); transition: opacity .4s, transform .4s; }
.jd-scr h4 { margin: 0; font-family: var(--num); font-size: 1.3rem; }
.jd-scr p { margin: 0; color: var(--muted); font-size: .8rem; }
.jd-scan { background: #0b0d12; }
.jd-view { position: relative; width: 82%; aspect-ratio: 1; display: grid; place-items: center; background: #15181f; border-radius: 1rem; overflow: hidden; }
.jd-qr-cam { width: 62%; transform: rotate(-6deg); filter: brightness(.9); }
.jd-corners { position: absolute; inset: 10%; background-repeat: no-repeat; background-image:
  linear-gradient(var(--gold),var(--gold)), linear-gradient(var(--gold),var(--gold)), linear-gradient(var(--gold),var(--gold)), linear-gradient(var(--gold),var(--gold)),
  linear-gradient(var(--gold),var(--gold)), linear-gradient(var(--gold),var(--gold)), linear-gradient(var(--gold),var(--gold)), linear-gradient(var(--gold),var(--gold));
  background-position: 0 0, 0 0, 100% 0, 100% 0, 0 100%, 0 100%, 100% 100%, 100% 100%;
  background-size: 22% 3px, 3px 22%, 22% 3px, 3px 22%, 22% 3px, 3px 22%, 22% 3px, 3px 22%; }
.jd-line { position: absolute; left: 12%; right: 12%; height: 2px; background: var(--cyan); box-shadow: 0 0 12px var(--cyan); animation: jdScan 1.4s ease-in-out infinite alternate; }
@keyframes jdScan { from { top: 14%; } to { top: 86%; } }
.jd-form { align-items: stretch; text-align: left; justify-content: flex-start; padding-top: 2rem; }
.jd-form h4 { margin-bottom: .6rem; }
.jd-form label { display: block; font-size: .72rem; color: var(--muted); }
.jd-form label small { display: block; font-size: .64rem; color: var(--muted-2); }
.jd-field { display: block; min-height: 2.3rem; margin-top: .3rem; padding: .55rem .7rem; border-radius: .7rem; background: #0b1130; border: 1px solid var(--edge);
  color: var(--text); font-size: .92rem; font-weight: 700; white-space: nowrap; overflow: hidden; }
.jd-field::after { content: ""; display: inline-block; width: 2px; height: 1em; margin-left: 2px; vertical-align: -2px; background: var(--cyan); animation: jdBlink .8s steps(1) infinite; }
@keyframes jdBlink { 50% { opacity: 0; } }
.jd-go { display: block; margin-top: .6rem; padding: .7rem 1rem; border-radius: 999px; text-align: center; font-weight: 800; color: #051022; background: linear-gradient(135deg, var(--blue), var(--cyan)); }
.jd-tick { display: grid; place-items: center; width: 4.2rem; height: 4.2rem; border-radius: 50%; font-size: 2.2rem; font-weight: 900; color: #04140c; background: var(--emerald); box-shadow: 0 0 30px rgba(46,230,160,.5); }
.jd-live { padding: 0; justify-content: flex-start; background: #040716; }
.jd-livebar { position: absolute; top: .6rem; right: .8rem; z-index: 2; display: flex; align-items: center; gap: .35rem; padding: .2rem .55rem; border-radius: 999px; background: rgba(4,7,22,.8);
  font-size: .62rem; font-weight: 800; letter-spacing: .12em; color: var(--muted); }
.jd-livebar i { width: .5rem; height: .5rem; border-radius: 50%; background: var(--emerald); animation: jdBlink 1.2s steps(1) infinite; }
/* Each live screenshot fades in, then scrolls down itself like a thumb moving through the page. */
.jd-shot { position: absolute; top: 0; left: 0; width: 100%; opacity: 0; transition: opacity .6s; }
.jd-shot.on { opacity: 1; animation: jdScroll 2.2s ease-in-out .5s forwards; }
@keyframes jdScroll { to { transform: translateY(var(--jd-scroll, -30%)); } }
/* which screen shows at which step */
.jd-stage[data-step="0"] .jd-scan, .jd-stage[data-step="1"] .jd-form, .jd-stage[data-step="2"] .jd-in, .jd-stage[data-step="3"] .jd-live { opacity: 1; transform: none; }
.jd-stage[data-step="2"] .jd-new, .jd-stage[data-step="3"] .jd-new { opacity: 1; transform: none; }
.jd-stage[data-step="3"] .jd-tab-game { opacity: 1; }
.jd-stage[data-step="3"] .jd-tab-join { opacity: 0; }
.jd-steps { list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem; margin: 0; padding: 0; }
.jd-steps li { display: flex; align-items: center; gap: .45rem; padding: .4rem .85rem .4rem .45rem; border-radius: 999px; font-size: .85rem; font-weight: 700; color: var(--muted);
  background: rgba(120,160,255,.08); border: 1px solid var(--edge-soft); cursor: pointer; transition: color .3s, background .3s, border-color .3s; }
.jd-steps li b { display: grid; place-items: center; width: 1.5rem; height: 1.5rem; border-radius: 50%; background: rgba(255,255,255,.1); font-family: var(--num); font-weight: 400; font-size: .8rem; }
.jd-steps li.on { color: #1a1000; background: linear-gradient(180deg, #fff1b0, var(--gold)); border-color: transparent; }
.jd-steps li.on b { background: rgba(0,0,0,.15); }
.jd-cap { min-height: 1.4em; color: var(--gold); font-weight: 700; }
.see-demo { display: inline-flex; align-items: center; gap: .45rem; margin-top: .9rem; padding: .55rem 1.1rem; border-radius: 999px; font: inherit; font-weight: 700; font-size: .9rem; cursor: pointer;
  color: var(--text); background: rgba(57,213,255,.1); border: 1px solid rgba(57,213,255,.45); }
.see-demo:hover { border-color: var(--cyan); color: var(--cyan); }
.see-demo svg { width: 1em; height: 1em; }
@media (max-width: 700px) {
  .jd-stage { flex-direction: column; gap: .8rem; }
  .jd-tablet { width: min(22rem, 92vw); }
  .jd-tab-join { gap: .6rem; padding: .7rem; } .jd-chip em { display: none; } .jd-qrcard small { display: none; }
  .jd-phone { width: min(11rem, 50vw); }
  .jd-steps li { font-size: .75rem; }
}
@media (prefers-reduced-motion: reduce) { .jd-line, .jd-shot.on { animation: none; } }

/* ---- pre-order bar across the top of the home and category pages --------------------------- */
.po-bar { display: block; text-align: center; padding: .55rem var(--gutter); font-weight: 700; font-size: .92rem;
  color: #051022; background: linear-gradient(90deg, var(--gold), #ffdf7a); }
.po-bar b { font-family: var(--num); font-weight: 400; }
.po-bar span { text-decoration: underline; text-underline-offset: 3px; }