/* =====================================================================
 * /css/qk-versus.css — Versus floor redesign
 *
 * Hoisted from design-imports/versus.html + versus-tile.html. The local
 * :root drifted to a bluer dark palette (`#050812` etc.); we deliberately
 * use the canonical `--s-*` tokens from stake.css. Cross-component
 * accents come from Phase 1's promoted `--qk-*` tokens.
 *
 * Namespacing: every selector is prefixed with `.vs-` so it can't collide
 * with the existing `.hero` / `.duel` / `.stats` classes used elsewhere.
 * =================================================================== */


/* =====================================================================
 * HERO meta — info row directly below the procedural canvas strip.
 * (The strip itself is rendered by `.qk-canvas-strip.qk-canvas-strip-hero`
 * with `data-qk-canvas="versus"` and styled in `overhaul.css`. The JS
 * draws particle streams, sparks, lightning, "VS" pulse, and "POW/BOOM/
 * CRIT" speech bursts.)
 * =================================================================== */
.vs-hero-meta {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  padding: 4px 16px 8px;
  margin: 0 0 32px;
  text-align: center;
}
.vs-hero-kicker {
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 12px;
  letter-spacing: .36em;
  text-transform: uppercase;
  color: var(--s-muted);
}
.vs-hero-kicker .vs-hero-live {
  color: var(--s-green);
}
.vs-hero-kicker .vs-hero-live::before {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--s-green);
  margin-right: 6px;
  box-shadow: 0 0 8px var(--s-green);
  animation: vsBlink 1.4s ease-in-out infinite;
}
@keyframes vsBlink { 0%, 100% { opacity: .4; } 50% { opacity: 1; } }

.vs-hero-sub {
  max-width: 600px;
  font-size: 15px;
  color: var(--s-muted);
  line-height: 1.55;
  margin: 0;
}
.vs-hero-stats {
  display: flex;
  gap: 28px;
  margin-top: 4px;
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 11px;
  color: var(--s-muted);
  letter-spacing: .08em;
  flex-wrap: wrap;
  justify-content: center;
}
.vs-hero-stats b {
  color: var(--s-text);
  font-weight: 900;
  font-size: 13px;
  margin-right: 6px;
}

/* Auth-only "View your stats" CTA — sits at the bottom of the meta row. */
.vs-hero-cta {
  margin-top: 6px;
}
.vs-hero-cta-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 9px 16px;
  border-radius: 999px;
  background: rgba(127,248,0,.08);
  border: 1px solid rgba(127,248,0,.28);
  color: var(--s-green);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
  text-decoration: none;
  transition: background .15s, border-color .15s, transform .15s;
}
.vs-hero-cta-link:hover {
  background: rgba(127,248,0,.16);
  border-color: rgba(127,248,0,.55);
  transform: translateY(-1px);
}

/* =====================================================================
 * SECTION heading — used between hero / tiles / stats bands.
 * =================================================================== */
.vs-section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  margin: 0 0 18px;
  flex-wrap: wrap;
}
.vs-section-head h2,
.vs-section-head h1 {
  margin: 0;
  font-size: 20px;
  font-weight: 900;
  letter-spacing: -.01em;
  color: var(--s-text);
}
.vs-section-head h2 .accent,
.vs-section-head h1 .accent { color: var(--s-green); }
.vs-section-head .vs-section-sub { color: var(--s-muted); font-size: 13px; }
.vs-section-head .vs-section-sub b { color: var(--s-text); font-weight: 800; }


/* =====================================================================
 * VS-TILE — enhanced versus tile used in place of `.s-tile-card` on
 * this page. See design-imports/versus-tile.html.
 * =================================================================== */
.vs-tile-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 18px;
  margin-bottom: 40px;
}

.qk-vs-tile {
  position: relative;
  display: block;
  background: var(--s-bg-2);
  border: 1px solid var(--s-line);
  border-radius: 14px;
  overflow: hidden;
  text-decoration: none;
  color: var(--s-text);
  cursor: pointer;
  transition:
    transform .25s cubic-bezier(.2, .8, .2, 1),
    border-color .2s,
    box-shadow .25s;
  isolation: isolate;
}

/* image / art area */
.qk-vs-tile .vs-art {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
}
.qk-vs-tile .vs-art-bg {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 88px;
  line-height: 1;
  filter: drop-shadow(0 12px 22px rgba(0, 0, 0, .5));
  transition: transform .5s cubic-bezier(.2, .8, .2, 1);
}

/* Per-game backdrops */
.qk-vs-tile.battleship .vs-art {
  background:
    radial-gradient(circle at 30% 30%, rgba(102, 255, 229, .18), transparent 60%),
    radial-gradient(ellipse at 80% 100%, rgba(20, 40, 80, .6), transparent 70%),
    linear-gradient(180deg, #0a1828, #050b18);
}
.qk-vs-tile.battleship .vs-art::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    repeating-linear-gradient(0deg,  rgba(102, 255, 229, .05) 0 1px, transparent 1px 24px),
    repeating-linear-gradient(90deg, rgba(102, 255, 229, .05) 0 1px, transparent 1px 24px);
  opacity: .6;
}
.qk-vs-tile.pong .vs-art {
  background:
    radial-gradient(ellipse at 50% 50%, rgba(127, 248, 0, .18), transparent 60%),
    linear-gradient(180deg, #08120a, #050b08);
}
.qk-vs-tile.pong .vs-art::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 0;
  bottom: 0;
  width: 1px;
  background: repeating-linear-gradient(180deg, var(--s-green) 0 8px, transparent 8px 16px);
  opacity: .3;
}
.qk-vs-tile.rps .vs-art {
  background:
    radial-gradient(ellipse at 30% 70%, rgba(255, 209, 102, .2), transparent 60%),
    linear-gradient(180deg, #1a1408, #0a0a05);
}

/* PvP badge */
.qk-vs-tile .vs-pvp {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px;
  background: rgba(127, 248, 0, .12);
  border: 1px solid rgba(127, 248, 0, .4);
  border-radius: 999px;
  font-size: 9px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--s-green);
  font-weight: 900;
  transition: box-shadow .25s, background .25s, border-color .25s;
}
.qk-vs-tile .vs-pvp::before {
  content: "";
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--s-green);
  box-shadow: 0 0 4px var(--s-green);
}
.qk-vs-tile:hover .vs-pvp,
.qk-vs-tile.is-hover .vs-pvp {
  background: rgba(127, 248, 0, .2);
  border-color: var(--s-green);
  box-shadow: 0 0 18px rgba(127, 248, 0, .55), inset 0 0 8px rgba(127, 248, 0, .2);
}

/* live count chip */
.qk-vs-tile .vs-live {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 10px;
  background: rgba(0, 0, 0, .5);
  -webkit-backdrop-filter: blur(6px);
          backdrop-filter: blur(6px);
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 999px;
  font-family: ui-monospace, monospace;
  font-size: 10px;
  color: var(--s-text);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.qk-vs-tile .vs-live::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--qk-red);
  box-shadow: 0 0 6px var(--qk-red);
  animation: vsLivePulse 1.6s infinite;
}
@keyframes vsLivePulse { 0%, 100% { opacity: .5; } 50% { opacity: 1; } }

/* play-now bar (slides up on hover) */
.qk-vs-tile .vs-play {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 4;
  padding: 14px 16px;
  background: linear-gradient(180deg, transparent, rgba(127, 248, 0, .95) 50%);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  transform: translateY(110%);
  transition: transform .35s cubic-bezier(.2, .8, .2, 1);
}
.qk-vs-tile:hover .vs-play,
.qk-vs-tile.is-hover .vs-play { transform: translateY(0); }
.qk-vs-tile .vs-play .vs-play-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  background: #061108;
  color: var(--s-green);
  border: 0;
  border-radius: 8px;
  font: inherit;
  font-weight: 900;
  font-size: 11px;
  letter-spacing: .16em;
  text-transform: uppercase;
  margin-left: auto;
}
.qk-vs-tile .vs-play .vs-play-stake {
  font-family: ui-monospace, monospace;
  font-size: 10px;
  color: #061108;
  font-weight: 900;
  letter-spacing: .06em;
  text-transform: uppercase;
}

/* art zoom on hover */
.qk-vs-tile:hover .vs-art-bg,
.qk-vs-tile.is-hover .vs-art-bg { transform: scale(1.06); }

/* body */
.qk-vs-tile .vs-body { padding: 14px 16px 16px; }
.qk-vs-tile .vs-title {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin: 0;
  font-size: 16px;
  font-weight: 900;
  letter-spacing: -.005em;
  color: var(--s-text);
}
.qk-vs-tile .vs-meta {
  margin-top: 4px;
  font-size: 11px;
  color: var(--s-muted-2);
  font-family: ui-monospace, monospace;
  letter-spacing: .06em;
}
.qk-vs-tile .vs-meta b { color: var(--s-muted); font-weight: 700; }

/* subtitle reveal on hover */
.qk-vs-tile .vs-sub {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows .3s cubic-bezier(.2, .8, .2, 1), margin-top .3s;
  margin-top: 0;
}
.qk-vs-tile .vs-sub > span { overflow: hidden; min-height: 0; }
.qk-vs-tile .vs-sub-line {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: var(--s-muted);
  padding-top: 8px;
  opacity: 0;
  transform: translateY(4px);
  transition: opacity .25s .05s, transform .25s .05s;
}
.qk-vs-tile .vs-sub-line .vs-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--s-green);
  box-shadow: 0 0 5px var(--s-green);
  flex: 0 0 auto;
}
.qk-vs-tile .vs-sub-line b { color: var(--s-text); font-weight: 800; }
.qk-vs-tile .vs-sub-line .vs-sep { color: var(--s-muted-2); }
.qk-vs-tile:hover .vs-sub,
.qk-vs-tile.is-hover .vs-sub { grid-template-rows: 1fr; margin-top: 2px; }
.qk-vs-tile:hover .vs-sub-line,
.qk-vs-tile.is-hover .vs-sub-line { opacity: 1; transform: translateY(0); }

/* hover tile lift */
.qk-vs-tile:hover,
.qk-vs-tile.is-hover {
  transform: translateY(-2px);
  border-color: rgba(127, 248, 0, .3);
  box-shadow: 0 22px 50px rgba(0, 0, 0, .5), 0 0 30px rgba(127, 248, 0, .08);
}

/* tap feedback */
.qk-vs-tile:active,
.qk-vs-tile.is-tap {
  transform: scale(.97);
  transition-duration: .1s;
}
.qk-vs-tile.is-tap { transform: scale(.97) translateY(-1px); }

/* Active-lobby state — pulsing border, resume bar permanently up */
.qk-vs-tile.is-active-lobby {
  border-color: var(--s-green);
  box-shadow: 0 0 0 1px var(--s-green), 0 0 28px rgba(127, 248, 0, .25);
  animation: vsTilePulse 2.2s ease-in-out infinite;
}
@keyframes vsTilePulse {
  0%, 100% { box-shadow: 0 0 0 1px var(--s-green), 0 0 22px rgba(127, 248, 0, .18); }
  50%      { box-shadow: 0 0 0 1px var(--s-green), 0 0 36px rgba(127, 248, 0, .42); }
}
.qk-vs-tile.is-active-lobby .vs-play { transform: translateY(0); }
.qk-vs-tile.is-active-lobby .vs-live { display: none; }

.qk-vs-tile .vs-active-ribbon {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 4;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px;
  background: var(--s-green);
  color: #061108;
  border-radius: 999px;
  font-size: 9px;
  letter-spacing: .18em;
  text-transform: uppercase;
  font-weight: 900;
  box-shadow: 0 0 14px rgba(127, 248, 0, .55);
}
.qk-vs-tile .vs-active-ribbon::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #061108;
  animation: vsLivePulse 1.4s infinite;
}
.qk-vs-tile:not(.is-active-lobby) .vs-active-ribbon { display: none; }
.qk-vs-tile.is-active-lobby .vs-meta { color: var(--s-green); }
.qk-vs-tile.is-active-lobby .vs-meta b { color: var(--s-green); }


/* =====================================================================
 * HOW IT WORKS band
 * =================================================================== */
.vs-how {
  margin-bottom: 40px;
  padding: 24px 28px;
  border-radius: 16px;
  border: 1px solid var(--s-line);
  background:
    linear-gradient(100deg, rgba(127, 248, 0, .04), rgba(102, 255, 229, .03) 50%, transparent 100%),
    var(--s-bg-2);
  position: relative;
  overflow: hidden;
}
.vs-how::before {
  content: "";
  position: absolute;
  right: -40px;
  top: -40px;
  width: 280px;
  height: 280px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(127, 248, 0, .08), transparent 70%);
  pointer-events: none;
}
.vs-how-head {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}
.vs-how-head h2 {
  margin: 0;
  font-size: 18px;
  font-weight: 900;
  letter-spacing: -.01em;
}
.vs-how-head .vs-how-pill {
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--s-green);
  background: rgba(127, 248, 0, .1);
  border: 1px solid rgba(127, 248, 0, .35);
  padding: 4px 10px;
  border-radius: 999px;
  white-space: nowrap;
}
.vs-how-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 16px;
  position: relative;
  z-index: 1;
}
.vs-how-cell {
  padding: 16px;
  background: rgba(255, 255, 255, .02);
  border: 1px solid var(--s-line);
  border-radius: 12px;
}
.vs-how-cell .vs-how-num {
  font-family: ui-monospace, monospace;
  font-size: 11px;
  color: var(--s-green);
  font-weight: 900;
  letter-spacing: .18em;
  margin-bottom: 8px;
}
.vs-how-cell h4 {
  margin: 0 0 4px;
  font-size: 14px;
  font-weight: 800;
  color: var(--s-text);
}
.vs-how-cell p {
  margin: 0;
  font-size: 12px;
  line-height: 1.55;
  color: var(--s-muted);
}
.vs-how-cell b { color: var(--s-text); font-weight: 700; }


/* =====================================================================
 * Responsive tweaks — canvas strip handles its own height in
 * overhaul.css; we only need to thin the meta row on small viewports.
 * =================================================================== */
@media (max-width: 780px) {
  .vs-hero-meta { gap: 10px; margin-bottom: 18px; }
  .vs-hero-sub { font-size: 13px; }
  .vs-hero-stats { gap: 18px; font-size: 10px; }
  .vs-hero-kicker { font-size: 11px; letter-spacing: .28em; }
}