/* =========================================================
   Landing v2 — B9 mockup-faithful redesign
   Scoped to .lv3 (landing) and .pv3 (picker). Filename stays
   landing-v2.css for back-compat with all the room/game CSS
   files that import it; the .lv3 prefix avoids style bleed.

   Palette + tokens shared between landing and picker.
   ========================================================= */

html:has(.lv3),
body:has(.lv3),
html:has(.pv3:not(.hidden)),
body:has(.pv3:not(.hidden)) {
  background: #1B0B33;
  margin: 0;
  padding: 0;
}

main.container:has(> .landing-screen.lv3:not(.hidden)),
main.container:has(> .picker-screen.pv3:not(.hidden)) {
  width: 100%;
  max-width: 100%;
  padding: 0;
  margin: 0;
}

.lv3,
.pv3 {
  --bg: #1B0B33;
  --bg-deep: #120721;
  --panel: #271241;
  --panel-soft: rgba(255, 255, 255, 0.04);
  --panel-border: rgba(255, 255, 255, 0.10);
  --purple: #7E40FF;
  --purple-strong: #6B2BF0;
  --purple-light: #A78BFA;
  --purple-soft: #4B2A8A;
  --yellow: #FFD93D;
  --yellow-deep: #F0C020;
  --yellow-soft: rgba(255, 217, 61, 0.18);
  --cream: #F4E9C8;
  --cream-deep: #E9DCB1;
  --ink: #1B0B33;
  --white: #ffffff;
  --soft: #C8B5E8;
  --soft-dim: #9F8AC4;
  --shadow-sm: 0 3px 0 rgba(0, 0, 0, 0.28);
  --shadow-md: 0 5px 0 rgba(0, 0, 0, 0.32);
  --shadow-lg: 0 7px 0 rgba(0, 0, 0, 0.34);
  --halftone:
    radial-gradient(circle, rgba(255, 255, 255, 0.04) 1px, transparent 1.6px) 0 0 / 20px 20px;
  --paper-halftone:
    radial-gradient(circle, rgba(0, 0, 0, 0.06) 0.8px, transparent 1.2px) 0 0 / 6px 6px;

  font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  color: var(--white);
}

.lv3 *,
.pv3 * { box-sizing: border-box; }

.lv3 {
  position: relative;
  isolation: isolate;
  background-color: var(--bg);
  min-height: 100vh;
  /* Top padding compensates for the fixed header (~80px tall). */
  padding: 80px 0 16px;
  margin: 0;
  overflow-x: clip;
}

.lv3::before,
.pv3::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image: var(--halftone);
  background-attachment: fixed;
}
.lv3 > *,
.pv3 > * { position: relative; z-index: 1; }

/* =========================================================
   Header (shared between landing + picker)
   `position: fixed` (not sticky) because iOS Safari's rubber-
   band / momentum scroll briefly detaches sticky elements from
   the top of the viewport — a few pixels of page background
   leak through between the top edge of the screen and the
   header during the elastic bounce. fixed is locked to the
   viewport and never reattaches mid-scroll.
   The page content below has a matching padding-top so it
   doesn't slide under the now-out-of-flow header.
   ========================================================= */
.lv3 .lv3-header,
.pv3 .pv3-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 14px 16px 10px;
  background-color: rgba(27, 11, 51, 0.96);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

/* Header height (~80px = 14px padding + 56px logo + 10px padding) is
   baked into .lv3 / .pv3 padding-top in their main definitions. */

/* =========================================================
   JOINO torn-paper logo (used in header + footer)
   ========================================================= */
.lv3-logo {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
}
/* B9.2: PNG logo replaces the CSS torn-paper clip-path. The .lv3-logo-shape
   / .lv3-logo-text rules are kept below as a safety net in case any
   page still references those spans (none do at the moment). */
.lv3-logo-img {
  display: block;
  height: 56px;
  width: auto;
  filter: drop-shadow(2px 4px 0 rgba(0, 0, 0, 0.35));
}
.lv3-footer-logo .lv3-logo-img { height: 44px; }

.lv3 .lv3-header-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

/* =========================================================
   Purple CTA pill — "Играть" / "Назад" / menu primary
   ========================================================= */
.lv3-cta-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: var(--purple);
  color: var(--white);
  border: 0;
  border-radius: 18px;
  padding: 13px 28px;
  font-family: "Inter", sans-serif;
  font-weight: 700;
  font-size: 16px;
  cursor: pointer;
  box-shadow: var(--shadow-md);
  transition: transform 0.08s ease, box-shadow 0.08s ease, background 0.15s ease;
}
.lv3-cta-pill:hover { background: var(--purple-strong); }
.lv3-cta-pill:active {
  transform: translateY(2px);
  box-shadow: var(--shadow-sm);
}
.lv3-cta-pill--menu {
  background: var(--yellow);
  color: var(--ink);
  margin-top: 4px;
}
.lv3-cta-pill--menu:hover { background: var(--yellow-deep); }

/* =========================================================
   Burger menu button — dark rounded square
   ========================================================= */
.lv3 .lv3-menu-btn {
  width: 50px;
  height: 50px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--panel-border);
  color: var(--white);
  border-radius: 14px;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  cursor: pointer;
  padding: 0;
}
.lv3 .lv3-menu-btn:hover { background: rgba(255, 255, 255, 0.08); }
.lv3 .lv3-menu-btn span {
  display: block;
  width: 22px;
  height: 2.5px;
  background: var(--white);
  border-radius: 2px;
}

.lv3 .lv3-header-menu {
  position: absolute;
  top: calc(100% + 6px);
  right: 14px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 12px;
  background: var(--panel);
  border: 1px solid var(--panel-border);
  border-radius: 14px;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.45);
  min-width: 210px;
  z-index: 60;
}
.lv3 .lv3-header-menu a {
  color: var(--white);
  text-decoration: none;
  font-weight: 600;
  padding: 8px 10px;
  border-radius: 8px;
  font-size: 14.5px;
}
.lv3 .lv3-header-menu a:hover { background: rgba(255, 255, 255, 0.06); }
.lv3 .lv3-header-menu.hidden { display: none; }

/* =========================================================
   Hero — text LEFT + illustration RIGHT, side-by-side.
   Matches Sasha's mockup #2: text col gets ~50%, image col gets
   ~50% (image bleeds slightly to the right edge of the screen
   so it feels like it floats off-page). No backdrop, no veil —
   the dark purple page color shows behind text directly.
   ========================================================= */
/* Hero — image fills column edge-to-edge so it visually matches
   the height of the text content (title → trust line).
   Current hero.png is landscape (16:10), so `cover` is the only
   way to make the image visually big on mobile; the trade-off is
   that 1-2 outer characters may crop. When a portrait hero.png
   (3:4 tall) is available, swap to object-fit:contain and all
   four characters will fit naturally without crop. */
.lv3-hero {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  align-items: stretch;
  gap: 0;
  padding: 16px 0 18px 18px;
  min-height: 320px;
}
.lv3-hero-text {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: flex-start;
  justify-content: center;
  min-width: 0;
  padding-right: 8px;
}
.lv3-hero-art {
  position: relative;
  align-self: center;
  /* overflow:visible — allow the scaled image to bleed slightly
     left of its column without being clipped. The text column
     has z-index:2 so it stays in front of the bleed area, and
     the image's mask-gradient on the left edge fades the bleed
     into the page background. */
  overflow: visible;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: flex-end;
}
/* Image displays at its NATURAL aspect ratio + an extra visual
   bump via transform:scale so it matches Sasha's red-box target.
   Anchored to the RIGHT edge so it doesn't shift the layout —
   the extra width spills leftward behind the text where the mask
   gradient hides the seam. transform doesn't change the box
   size, so the text column stays put. */
.lv3-hero-art img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 100%;
  transform: scale(1.22);
  transform-origin: right center;
  /* Slight overall fade so the bright image colours don't overpower
     the yellow accent text ("прямо в браузере") that sits on top
     of the left bleed area. */
  opacity: 0.92;
  /* Two stacked masks intersected so the image fades on THREE
     edges:
       1) horizontal — left edge dissolves into the page bg behind
          the text (longer + softer ramp than before so "браузере"
          stays clearly readable).
       2) vertical — top and bottom edges fade into the page bg
          for a soft transition into the title above and the
          steps panel below.
     mask-composite: intersect (webkit: source-in) means a pixel
     is shown only when BOTH masks say "show". */
  -webkit-mask-image:
    linear-gradient(
      to right,
      transparent 0%,
      rgba(0, 0, 0, 0.25) 10%,
      rgba(0, 0, 0, 0.55) 20%,
      rgba(0, 0, 0, 0.85) 30%,
      #000 40%,
      #000 100%
    ),
    linear-gradient(
      to bottom,
      transparent 0%,
      rgba(0, 0, 0, 0.40) 6%,
      #000 16%,
      #000 84%,
      rgba(0, 0, 0, 0.40) 94%,
      transparent 100%
    );
  -webkit-mask-composite: source-in;
  mask-image:
    linear-gradient(
      to right,
      transparent 0%,
      rgba(0, 0, 0, 0.25) 10%,
      rgba(0, 0, 0, 0.55) 20%,
      rgba(0, 0, 0, 0.85) 30%,
      #000 40%,
      #000 100%
    ),
    linear-gradient(
      to bottom,
      transparent 0%,
      rgba(0, 0, 0, 0.40) 6%,
      #000 16%,
      #000 84%,
      rgba(0, 0, 0, 0.40) 94%,
      transparent 100%
    );
  mask-composite: intersect;
}
.lv3-hero-title {
  margin: 0;
  font-family: "Inter", sans-serif;
  font-weight: 900;
  font-size: clamp(24px, 7vw, 52px);
  line-height: 1.05;
  letter-spacing: -0.6px;
  color: var(--white);
}
.lv3-accent {
  color: var(--yellow);
  display: inline-block;
  white-space: nowrap;
}
/* Yellow underline accent — was on .lv3-final-cta__title for
   "прямо сейчас"; removed per Sasha's request, the yellow text
   colour is enough of an accent. The legacy rule is gone; the
   class still styles the text itself yellow above. */
.lv3-hero-sub {
  margin: 0;
  /* Mobile: 12px so the longest line "показывает QR — остальные"
     (26 chars at Inter weight 600) fits the text column (~180px
     usable on 390 viewport) without an unwanted wrap. The <br>
     tags in the HTML are the LOGICAL line breaks; if the line
     also wraps mid-segment because of insufficient col width
     the user sees 6 lines instead of the 4 they asked for. */
  font-size: 12px;
  line-height: 1.4;
  color: var(--soft);
}
.lv3-hero-sub strong {
  color: var(--white);
  font-weight: 800;
}

.lv3-btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background: var(--yellow);
  color: var(--ink);
  border: 0;
  border-radius: 22px;
  padding: 16px 24px;
  font-family: "Inter", sans-serif;
  font-weight: 800;
  font-size: 16px;
  letter-spacing: 0.2px;
  cursor: pointer;
  box-shadow: var(--shadow-md);
  transition: transform 0.08s ease, box-shadow 0.08s ease, background 0.15s ease;
  text-decoration: none;
  white-space: nowrap;
}
.lv3-btn-primary:hover { background: var(--yellow-deep); }
.lv3-btn-primary:active {
  transform: translateY(3px);
  box-shadow: 0 2px 0 rgba(0, 0, 0, 0.32);
}
.lv3-btn-primary__arrow {
  font-size: 20px;
  font-weight: 900;
  line-height: 1;
  transition: transform 0.15s ease;
}
.lv3-btn-primary:hover .lv3-btn-primary__arrow { transform: translateX(3px); }
.lv3-btn-primary--large { padding: 18px 28px; font-size: 17px; }

/* Hero CTA stretches to the width of the text column so the button
   visually aligns with the subtitle block. */
.lv3-hero-text .lv3-btn-primary {
  width: 100%;
  justify-content: center;
}

/* Trust line — no background pill, plain text in one line, shield-
   with-check icon on the left. */
.lv3-trust-line {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 0;
  background: transparent;
  font-size: 12.5px;
  color: var(--soft);
  font-weight: 600;
  white-space: nowrap;
}
.lv3-trust-ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
}
.lv3-trust-ico svg {
  width: 100%;
  height: 100%;
}

/* B10: three USP bullets above the hero CTA (Бесплатно / Без
   скачивания / Без регистрации). Each row: purple-circle yellow-
   check icon + label. Replaces the long subtitle paragraph + the
   single trust line. */
.lv3-hero-usp {
  list-style: none;
  margin: 4px 0 4px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.lv3-hero-usp li {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: "Inter", sans-serif;
  font-weight: 600;
  font-size: 14px;
  color: var(--white);
  line-height: 1.2;
}
.lv3-hero-usp-ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  flex: 0 0 20px;
  filter: drop-shadow(0 2px 0 rgba(0, 0, 0, 0.25));
}
.lv3-hero-usp-ico svg {
  width: 100%;
  height: 100%;
}

/* =========================================================
   Steps — 3 columns in a row even on mobile
   Number sits LEFT of the icon (not above) → step is shorter.
   ========================================================= */
.lv3-steps {
  padding: 4px 14px 14px;
}
.lv3-steps-row {
  list-style: none;
  margin: 0 auto;
  padding: 14px 8px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--panel-border);
  border-radius: 20px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 4px;
  max-width: 980px;
}
.lv3-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 6px;
  padding: 4px 4px;
  min-width: 0;
  position: relative;
}
.lv3-step + .lv3-step::before {
  content: "";
  position: absolute;
  left: -2px;
  top: 18%;
  bottom: 18%;
  width: 1px;
  background: rgba(255, 255, 255, 0.08);
}
.lv3-step-head {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 4px;
}
.lv3-step-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  background: var(--purple);
  color: var(--white);
  border-radius: 50%;
  font-family: "Inter", sans-serif;
  font-weight: 800;
  font-size: 13px;
  flex: 0 0 26px;
}
.lv3-step-ico {
  width: 72px;
  height: 72px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 72px;
}
.lv3-step-ico svg,
.lv3-step-ico img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
}
.lv3-step-title {
  margin: 0;
  font-family: "Inter", sans-serif;
  font-weight: 800;
  /* 12 px on mobile so even the longest title "Играйте вместе"
     (~14 chars) stays on a single line in the narrow step col
     (~110px usable on a 390 viewport). Bumped to 16px on
     tablet+ where the column is wider. */
  font-size: 12px;
  color: var(--white);
  letter-spacing: -0.2px;
  line-height: 1.1;
  white-space: nowrap;
  text-align: center;
}
.lv3-step-text {
  margin: 0;
  font-size: 11px;
  color: var(--soft);
  line-height: 1.3;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* =========================================================
   Section title (white, large)
   ========================================================= */
.lv3-section-title {
  margin: 0 0 14px;
  padding: 0 16px;
  font-family: "Inter", sans-serif;
  font-weight: 800;
  font-size: clamp(22px, 6vw, 32px);
  color: var(--white);
  letter-spacing: -0.3px;
}

/* =========================================================
   Popular games — horizontal scroll-snap row
   3 visible at a time on mobile; swipe for the rest.
   ========================================================= */
.lv3-games {
  padding: 16px 0 22px;
}
.lv3-games-row {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  overflow-y: visible;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding: 6px 16px 14px;
  scroll-padding-inline: 16px;
}
.lv3-games-row::-webkit-scrollbar { display: none; }

/* Game card = JUST the image (name is baked into the ribbon banner
   in the PNG itself). Card border matches image aspect ratio so
   there's no empty cream space around the artwork. */
.lv3-game-card {
  flex: 0 0 calc((100% - 24px) / 3);
  scroll-snap-align: start;
  background: transparent;
  border: 0;
  border-radius: 16px;
  padding: 0;
  cursor: pointer;
  box-shadow: var(--shadow-lg);
  font: inherit;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  overflow: hidden;
  transition: transform 0.1s ease, box-shadow 0.1s ease;
}
.lv3-game-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 9px 0 rgba(0, 0, 0, 0.34);
}
.lv3-game-card:active {
  transform: translateY(2px);
  box-shadow: var(--shadow-md);
}
.lv3-game-card:focus-visible {
  outline: 3px solid var(--yellow);
  outline-offset: 3px;
}
.lv3-game-card img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 281 / 351;
  object-fit: cover;
}

/* =========================================================
   Final CTA panel — dark purple card with friends illustration
   on the left and 3-line title + button on the right.
   Button is constrained to the text column so it never escapes
   the panel.
   ========================================================= */
.lv3-final-cta {
  margin: 8px 14px 22px;
  padding: 18px 14px 18px;
  background:
    radial-gradient(ellipse at 20% 20%, rgba(167, 139, 250, 0.20), transparent 55%),
    radial-gradient(ellipse at 80% 100%, rgba(126, 64, 255, 0.28), transparent 55%),
    var(--panel);
  border: 1px solid var(--panel-border);
  border-radius: 22px;
  display: grid;
  grid-template-columns: 90px 1fr;
  align-items: center;
  gap: 10px;
  box-shadow: var(--shadow-md);
  overflow: hidden;
}
.lv3-final-cta__art {
  display: flex;
  align-items: center;
  justify-content: center;
}
.lv3-final-cta__art img,
.lv3-final-cta__art-fallback {
  display: block;
  width: 100%;
  height: auto;
}
.lv3-final-cta__text {
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: stretch;
  min-width: 0;
}
.lv3-final-cta__title {
  margin: 0;
  font-family: "Inter", sans-serif;
  font-weight: 900;
  font-size: clamp(17px, 4.4vw, 24px);
  line-height: 1.15;
  letter-spacing: -0.3px;
  color: var(--white);
}
.lv3-final-cta__btn {
  width: 100%;
  padding: 14px 18px;
  font-size: 14px;
  white-space: normal;
}
.lv3-final-cta__btn .lv3-btn-primary__arrow { font-size: 18px; }

/* =========================================================
   Footer — slim, JOINO logo + tag + nav + copy
   ========================================================= */
.lv3-footer {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: auto auto auto;
  align-items: center;
  gap: 4px 16px;
  padding: 18px 18px 22px;
  border-top: 1px solid var(--panel-border);
}
.lv3-footer-logo {
  grid-row: 1 / span 2;
}
.lv3-footer-tag {
  font-size: 12.5px;
  color: var(--soft);
  line-height: 1.3;
  margin-top: 2px;
}
.lv3-footer-nav {
  grid-column: 1 / -1;
  display: flex;
  gap: 16px;
  justify-content: space-between;
  margin-top: 6px;
  padding-top: 8px;
  border-top: 1px dashed rgba(255, 255, 255, 0.08);
}
.lv3-footer-nav a {
  color: var(--soft);
  text-decoration: none;
  font-size: 13px;
  font-weight: 600;
}
.lv3-footer-nav a:hover { color: var(--white); }
.lv3-footer-copy {
  grid-column: 1 / -1;
  text-align: center;
  font-size: 11px;
  color: rgba(200, 181, 232, 0.5);
  margin-top: 4px;
}

/* =========================================================
   Picker — full screen-2 layout
   ========================================================= */
.pv3 {
  position: relative;
  isolation: isolate;
  background-color: var(--bg);
  min-height: 100vh;
  /* Top padding compensates for the fixed header (~80px tall). */
  padding: 80px 0 24px;
  overflow-x: clip;
}

.pv3 .pv3-header {
  padding: 14px 16px 10px;
}

.pv3-back-btn {
  padding: 11px 22px;
  font-size: 15px;
}

.pv3-hero {
  padding: 16px 18px 4px;
}
.pv3-title {
  margin: 0 0 4px;
  font-family: "Inter", sans-serif;
  font-weight: 900;
  font-size: clamp(28px, 8vw, 42px);
  letter-spacing: -0.6px;
  line-height: 1;
  color: var(--white);
}
.pv3-sub {
  margin: 0;
  font-size: 13.5px;
  color: var(--soft);
  line-height: 1.3;
}

.pv3-name {
  padding: 12px 18px 4px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.pv3-field-label {
  font-family: "Inter", sans-serif;
  font-weight: 700;
  font-size: 14px;
  color: var(--white);
}
.pv3-input {
  display: block;
  width: 100%;
  padding: 14px 16px;
  font-family: "Inter", sans-serif;
  font-size: 15px;
  font-weight: 500;
  color: var(--white);
  background: rgba(255, 255, 255, 0.04);
  border: 1.5px solid var(--panel-border);
  border-radius: 14px;
  outline: none;
  -webkit-appearance: none;
  appearance: none;
}
.pv3-input::placeholder { color: var(--soft-dim); }
.pv3-input:focus { border-color: var(--yellow); }
.pv3-input--code {
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 6px;
  font-weight: 700;
  font-size: 18px;
}

/* Picker game grid — 2 cols × 3 rows on mobile, large cream cards. */
.pv3-games {
  padding: 12px 14px 4px;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  max-width: 560px;
  margin: 0 auto;
}
.pv2-tile,
.pv3-tile {
  position: relative;
  background: var(--cream);
  background-image: var(--paper-halftone);
  border: 0;
  border-radius: 18px;
  padding: 6px;
  cursor: pointer;
  box-shadow: var(--shadow-lg);
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  overflow: hidden;
  transition: transform 0.1s ease, box-shadow 0.1s ease;
}
.pv2-tile:hover,
.pv3-tile:hover {
  transform: translateY(-2px);
  box-shadow: 0 9px 0 rgba(0, 0, 0, 0.34);
}
.pv2-tile:active,
.pv3-tile:active {
  transform: translateY(2px);
  box-shadow: var(--shadow-md);
}
.pv2-tile:focus-visible,
.pv3-tile:focus-visible {
  outline: 3px solid var(--yellow);
  outline-offset: 3px;
}
.pv2-tile[disabled],
.pv3-tile[disabled] { opacity: 0.6; pointer-events: none; }

/* B18: rating badge — injected by app.js after fetching /api/games/ratings.
   Sits in the top-right corner of the tile in a yellow comic pill. */
.pv2-tile__rating {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 2px 9px 3px;
  background: var(--yellow, #FFD23F);
  color: var(--ink, #0a0a12);
  border: 2px solid #000;
  border-radius: 999px;
  box-shadow: 2px 2px 0 #000;
  font-family: "Bowlby One", "Inter", sans-serif;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.3px;
  pointer-events: none;
  white-space: nowrap;
}
.pv2-tile__rating-count { font-family: "Inter", sans-serif; font-weight: 700; opacity: 0.65; font-size: 9px; }
.pv2-tile img,
.pv3-tile img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 281 / 351;
  object-fit: cover;
  border-radius: 12px;
}

/* Per-game info row under the tile art: player count (+ 18+ age badge
   for bottle / alco-roulette). Sits on the cream tile padding below the
   image. Static markup in index.html. */
.pv3-tile-meta {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 7px;
  padding: 0 4px 2px;
}
.pv3-tile-players {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-family: "Inter", system-ui, sans-serif;
  font-weight: 800;
  font-size: 11px;
  line-height: 1;
  color: var(--ink, #1B0B33);
}
.pv3-tile-ico {
  width: 14px;
  height: 14px;
  fill: currentColor;
  opacity: 0.85;
  flex: 0 0 auto;
}
.pv3-tile-age {
  display: inline-flex;
  align-items: center;
  font-family: "Bowlby One", "Inter", sans-serif;
  font-weight: 800;
  font-size: 10px;
  line-height: 1;
  letter-spacing: 0.3px;
  color: #fff;
  background: #E23B5A;
  border: 1.5px solid #000;
  border-radius: 999px;
  padding: 2px 6px 3px;
}

.pv3-hint {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 10px auto 0;
  padding: 0 18px;
  max-width: 560px;
  font-size: 12.5px;
  color: var(--soft);
  line-height: 1.4;
}
.pv3-hint-ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  flex: 0 0 22px;
  border-radius: 50%;
  background: var(--purple-soft);
  color: var(--white);
  font-size: 14px;
  font-weight: 700;
  font-family: "Inter", sans-serif;
}

.pv3-status {
  margin: 6px auto 0;
  padding: 0 18px;
  max-width: 560px;
  text-align: center;
  font-size: 13px;
  color: var(--soft);
  min-height: 0;
}

.pv3-join {
  margin: 14px 14px 0;
  padding: 18px 18px 20px;
  background: rgba(255, 255, 255, 0.04);
  border: 1.5px solid var(--panel-border);
  border-radius: 22px;
  max-width: 560px;
  margin-left: auto;
  margin-right: auto;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.pv3-join-title {
  margin: 0 0 6px;
  font-family: "Inter", sans-serif;
  font-weight: 800;
  font-size: 18px;
  text-align: center;
  color: var(--white);
}
.pv3-join-label { margin-top: 2px; }
.pv3-join-btn {
  margin-top: 4px;
  padding: 14px 24px;
  font-family: "Inter", sans-serif;
  font-weight: 800;
  font-size: 16px;
  color: var(--white);
  background: var(--purple);
  border: 0;
  border-radius: 14px;
  cursor: pointer;
  box-shadow: var(--shadow-md);
  transition: transform 0.08s ease, box-shadow 0.08s ease, background 0.15s ease;
}
.pv3-join-btn:hover { background: var(--purple-strong); }
.pv3-join-btn:active {
  transform: translateY(2px);
  box-shadow: var(--shadow-sm);
}

/* =========================================================
   Visually-hidden helper (kept from previous version)
   ========================================================= */
.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  clip-path: inset(50%);
}

/* =========================================================
   Wider tablet/desktop tweaks
   ========================================================= */
@media (min-width: 640px) {
  .lv3-hero {
    padding: 28px 0 28px 32px;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    min-height: 360px;
  }
  .lv3-hero-text {
    gap: 18px;
    max-width: 560px;
    padding-right: 16px;
  }
  .lv3-hero-sub { font-size: 15px; }
  .lv3-trust-line { font-size: 14px; }
  .lv3-hero-usp li { font-size: 16px; gap: 12px; }
  .lv3-hero-usp-ico { width: 22px; height: 22px; flex: 0 0 22px; }
  .lv3-trust-ico { width: 20px; height: 20px; flex: 0 0 20px; }

  .lv3-steps { padding: 22px 24px 28px; }
  .lv3-steps-row { padding: 20px 18px; gap: 12px; }
  .lv3-step-num { width: 36px; height: 36px; font-size: 16px; }
  .lv3-step-ico { width: 104px; height: 104px; flex: 0 0 104px; }
  .lv3-step-title { font-size: 16px; }
  .lv3-step-text { font-size: 12.5px; }

  .lv3-section-title { padding: 0 24px; }
  .lv3-games-row { padding: 6px 24px 16px; gap: 16px; }
  .lv3-game-card {
    flex: 0 0 calc((100% - 32px) / 3);
    border-radius: 22px;
  }

  .lv3-final-cta {
    margin: 12px 24px 28px;
    padding: 26px 24px 28px;
    grid-template-columns: 140px 1fr;
    gap: 20px;
  }
  .lv3-final-cta__btn { padding: 16px 22px; font-size: 16px; }

  .pv3 .pv3-header { padding: 18px 24px 12px; }
  .pv3-hero { padding: 24px 24px 6px; }
  .pv3-name { padding: 16px 24px 6px; }
  .pv3-games {
    padding: 16px 24px 8px;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    max-width: 760px;
  }
  .pv3-hint { padding: 0 24px; }
  .pv3-join { margin: 18px 24px 0; padding: 22px; }
}

@media (min-width: 960px) {
  .lv3-hero {
    max-width: 1180px;
    margin: 0 auto;
    padding: 48px 0 48px 40px;
    min-height: 440px;
  }
  .lv3-hero-title { font-size: 54px; }

  .lv3-steps { max-width: 1100px; margin: 0 auto; }
  .lv3-final-cta { max-width: 1100px; margin: 16px auto 36px; }
}