/* ===========================================================================
   xg-pilot.css - prototype fidelity for the play pages (2026-09-14)
   ---------------------------------------------------------------------------
   Ports the play-page redesign prototype onto the live play pages, so a design
   can be judged against the prototype before anything is folded into the main
   site sheets. Sections:

     1. fullscreen + open-on-itch pinned INSIDE the stage's top-right corner,
     2. the favourite + share icons moved up into the title bar,
     3. a hint line under the primary action ("Free - runs in your browser"),
     4. a 4-up spec strip under the stage instead of vertical Game Info rows,
     5. an "About" panel clamped with a Read more toggle,
     6. the game's own cover art inside the hero, letterboxed over a blurred
        copy of itself so the side bars fill with the art's own colours,
     7. the click/tap prompt rendered as the site's primary CTA button (cyan
        pill, slow shine sweep), bottom-aligned like the prototype's stage.

   Loaded by all 57 play pages (the two legacy yareel templates are excluded -
   they have no play-page.css and no hero title bar). The matching DOM lives in
   assets/js/xg-pilot.js and in the pages themselves. The per-page cover URL is
   inline on the page's .hero-art-bg element, because a url() inside a
   stylesheet resolves against the STYLESHEET rather than the page. Colours come
   from the token layer where a page is opted in (.xg-tokens-apply), with plain
   fallbacks so the sheet stays safe on its own.
   =========================================================================== */

/* ---- 1. Stage corner: fullscreen + open-on-itch inside the player ---------
   .play-hero is already position:relative + overflow:hidden, so the block
   simply pins to its top-right and is clipped by the stage's radius. */
.pilot-stage-corner {
  position: absolute;
  top: 0.7rem;
  right: 0.7rem;
  z-index: 6;
  display: flex;
  align-items: center;
  gap: 0.45rem;
}

.pilot-stage-corner > * {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 10px;
  background: rgba(10, 6, 18, 0.55);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  color: rgba(255, 255, 255, 0.85);
  font-size: 0.95rem;
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease, border-color 0.2s ease;
}

.pilot-stage-corner > *:hover,
.pilot-stage-corner > *:focus-visible {
  background: rgba(20, 10, 32, 0.8);
  border-color: rgba(255, 255, 255, 0.32);
  color: #fff;
  transform: translateY(-1px);
}

[data-bs-theme="light"] .pilot-stage-corner > * {
  background: rgba(255, 255, 255, 0.82);
  border-color: rgba(0, 0, 0, 0.12);
  color: rgba(26, 26, 46, 0.8);
}

[data-bs-theme="light"] .pilot-stage-corner > *:hover {
  background: #fff;
  color: #1a1a2e;
}

/* Fullscreen: the stage IS the screen, so the corner controls have to get out of
   the way. They sit INSIDE the fullscreened element (.play-hero is what
   goFullscreen() puts fullscreen), which is why nothing else hides them - they are
   part of the fullscreen subtree, so they get painted over the game.
   TWO selectors on purpose: the unprefixed :fullscreen is ignored by older WebKit,
   which only understands :-webkit-full-screen. */
.play-hero:fullscreen .pilot-stage-corner,
.play-hero:-webkit-full-screen .pilot-stage-corner {
  display: none;
}

/* ---- 2. Favourite + share promoted into the title bar -------------------- */
.pilot-title-actions {
  display: flex;
  align-items: center;
  gap: 0.2rem;
  flex-shrink: 0;
}

.pilot-title-actions > * {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.15rem 0.35rem;
  border: 0;
  background: transparent;
  color: rgba(234, 234, 234, 0.62);
  font-size: 1.05rem;
  line-height: 1;
  cursor: pointer;
  transition: color 0.2s ease, transform 0.2s ease;
}

.pilot-title-actions > *:hover {
  color: #ff2d3d;
  transform: translateY(-1px);
}

/* The counters belong WITH the icon actions on the right: space-between with
   three children would otherwise park them in the middle of the bar (the bar
   only carries the title + counters until this pilot adds a third block). */
.hero-title-bar #playStats {
  margin-left: auto;
}

/* The favourites button ships with a text label that play-page.css hides only
   inside .itch-hero-actions - now that the button has moved, hide it here too. */
.pilot-title-actions #favBtnText {
  display: none;
}

/* Same story for the button's own fill: .play-btn-fav paints a red tint
   (rgba(220,53,69,.15), .35 when active) which .itch-hero-actions neutralises
   while the button lives there. Now that it sits in the bar, neutralise it here
   so it matches the rest of the icon row - a red-filled box next to the counters
   read as an error state. The active state is carried by the heart colour. */
.pilot-title-actions .play-btn-fav,
.pilot-title-actions .play-btn-fav:hover,
.pilot-title-actions .play-btn-fav.active,
[data-bs-theme="light"] .pilot-title-actions .play-btn-fav,
[data-bs-theme="light"] .pilot-title-actions .play-btn-fav:hover,
[data-bs-theme="light"] .pilot-title-actions .play-btn-fav.active {
  background: transparent;
  border: none;
}

.pilot-title-actions .play-btn-fav.active {
  color: #dc3545;
}

[data-bs-theme="light"] .pilot-title-actions > * {
  color: rgba(26, 26, 46, 0.55);
}

[data-bs-theme="light"] .pilot-title-actions .play-btn-fav.active {
  color: #dc3545;
}

/* The icon row below the stage is empty once its children have moved. */
.itch-hero-actions.pilot-empty {
  display: none;
}

/* ---- 3. Hint line under the primary action ------------------------------ */
.pilot-stage-hint {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0.5rem;
  z-index: 4;
  margin: 0;
  text-align: center;
  font-size: 0.76rem;
  letter-spacing: 0.04em;
  color: rgba(255, 255, 255, 0.55);
  text-shadow: 0 1px 8px rgba(3, 5, 12, 0.75);
  pointer-events: none;
}

/* The centred button sits at the vertical middle and the idle state shows no
   button at all, so the hint only has to give way when the flow moves the
   button down to the bottom edge (ad playing) - otherwise it would sit on top
   of it. */
.play-hero:has(.hero-bottom-play-btn.show:not(.centered)) .pilot-stage-hint {
  display: none;
}

/* Platforms shown as OS icons instead of "Web, Win, Android". The text version stays
   in the DOM as a visually-hidden span (see fillPlatforms in xg-pilot.js), so nothing
   is lost for screen readers or copy-paste. */
.pilot-spec__v.pilot-spec__os {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 1.05rem;
  line-height: 1;
}

.pilot-spec__os .bi {
  opacity: 0.92;
}

[data-bs-theme="light"] .pilot-spec__os .bi {
  opacity: 0.85;
}

@media (max-width: 575.98px) {
  .pilot-stage-hint {
    bottom: 0.35rem;
    font-size: 0.7rem;
  }
}

/* ---- 4. Spec strip: the Game Info rows, re-presented -------------------- */
.pilot-spec {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(158px, 1fr));
  gap: 0;
  margin: 0 0 2.25rem;
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 14px;
  overflow: hidden;
  background: rgba(14, 4, 22, 0.55);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}

.pilot-spec__item {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.8rem 1rem;
  border-right: 1px solid rgba(255, 255, 255, 0.06);
  text-decoration: none;
  color: inherit;
  min-width: 0;
}

.pilot-spec__item:last-child {
  border-right: 0;
}

/* Hairline between wrapped grid tracks (multi-row layouts). */
.pilot-spec__item:nth-child(n) {
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.pilot-spec__item > .bi {
  font-size: 1.05rem;
  color: rgb(var(--xg-tint-a, 220 60 120));
  flex-shrink: 0;
}

.pilot-spec__item > div {
  min-width: 0;
}

.pilot-spec__k {
  display: block;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(234, 234, 234, 0.5);
}

.pilot-spec__v {
  display: block;
  font-size: 0.9rem;
  font-weight: 600;
  color: rgba(240, 240, 245, 0.92);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pilot-spec__item[href]:hover,
a.pilot-spec__item:hover {
  background: rgba(255, 255, 255, 0.045);
}

.pilot-spec__item[href]:hover .pilot-spec__v,
a.pilot-spec__item:hover .pilot-spec__v {
  color: #fff;
  text-decoration: underline;
  text-underline-offset: 3px;
}

[data-bs-theme="light"] .pilot-spec {
  background: rgba(255, 255, 255, 0.72);
  border-color: rgba(0, 0, 0, 0.08);
}

[data-bs-theme="light"] .pilot-spec__item {
  border-right-color: rgba(0, 0, 0, 0.07);
  border-bottom-color: rgba(0, 0, 0, 0.07);
}

[data-bs-theme="light"] .pilot-spec__k {
  color: rgba(26, 26, 46, 0.55);
}

[data-bs-theme="light"] .pilot-spec__v {
  color: #1a1a2e;
}

[data-bs-theme="light"] .pilot-spec__item[href]:hover {
  background: rgba(0, 0, 0, 0.03);
}

@media (max-width: 575.98px) {
  .pilot-spec {
    grid-template-columns: 1fr 1fr;
    margin-bottom: 1.75rem;
  }

  .pilot-spec__item {
    padding: 0.65rem 0.8rem;
  }

  .pilot-spec__v {
    font-size: 0.84rem;
  }
}

/* ---- 5. About panel: clamped with a Read more toggle -------------------- */
.pilot-about--clamped {
  /* The mask fades the tail so the clamp works on any card background, in
     either theme, without a background-coloured gradient overlay. */
  max-height: 9.5rem;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(#000 62%, transparent 100%);
  mask-image: linear-gradient(#000 62%, transparent 100%);
}

.pilot-about-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  margin-top: 0.6rem;
  padding: 0;
  border: 0;
  background: none;
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: rgb(var(--xg-tint-a, 220 60 120));
  cursor: pointer;
}

.pilot-about-toggle:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}
/* ---- 6. Hero cover art: letterboxed art over a blurred copy of itself ------
   The game's own cover sits in the hero at object-fit:contain (never cropped)
   over a blurred copy of the SAME src, so the side bars fill with the art's own
   colours instead of the brand gradient - the prototype's stage treatment.
   Both layers are decorative and inert (pointer-events:none) and sit at
   z-index 1: above the drifting .play-hero::after backdrop (0), and BELOW the ad
   wrapper (z-index 1 but later in the DOM - equal z-index resolves by DOM order),
   the tap label (3), the itch iframe (3) and the loading splash (10/20).

   The image URL cannot live here: a url() inside a stylesheet resolves against
   the stylesheet, so it is inline on the page's own .hero-art-bg element - which
   also makes it a cache hit, since it is the same file the <img> uses.

   The 9 poster-hero pages (booty-heroes, everlusting-life, horny-villa,
   isekai-waifu-overlord, lust-frontiers, lust-goddess, passion-industry,
   slut-squad, yareel2-3d) already ship .play-hero-poster, so they reuse it as the
   art layer: the soft-blurred cover becomes the crisp letterboxed one and only
   the blurred backdrop is added. `.hidden` still beats this rule on specificity
   (0,3,0 vs 0,2,0), which is what the flow uses to clear the poster once the game
   is running. */
.hero-art-bg,
.hero-art-img,
.hero-art-scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}

.hero-art-bg {
  inset: -12%;
  background-size: cover;
  background-position: center;
  filter: blur(34px) saturate(1.15);
  opacity: 0.5;
}

.hero-art-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* Bottom-up darkening, so the prompt, the play button and the hint line stay
   readable over artwork that can be bright anywhere. */
.hero-art-scrim {
  background: linear-gradient(to top, rgba(6, 4, 10, 0.9) 0%, rgba(6, 4, 10, 0.35) 42%, rgba(6, 4, 10, 0.1) 70%);
}

.play-hero .play-hero-poster {
  object-fit: contain;
  filter: none;
  opacity: 1;
}

/* ---- 7. The click/tap prompt IS the primary CTA button --------------------
   The prompt used to be a glowing controller mark plus white Orbitron text in
   the middle of the panel. It is now the site's own CTA recipe: the element
   carries .play-hero-play-btn, so the cyan gradient, the #04161d ink, the 6s
   glow pulse and the 7s shine sweep all come from play-page.css and stay in step
   with #heroPlayBtn, which replaces the prompt after the click.
   Only the shape (the prototype's pill) and the position are set here:
   bottom-aligned with 24px of side padding, like the prototype's .rd-stage__center.
   The bottom padding is 36px rather than 24 because the shared .pilot-stage-hint
   line already owns the bottom 0.5rem (~26px tall with its line box) - at 24px the
   pill's glow touched it, so 36px restores the prototype's ~12px gap.
   The label still fills the hero, so the whole panel stays clickable. */
.hero-tap-label {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  padding: 24px 24px 36px;
  cursor: pointer;
  background: none;
  border: 0;
}

.hero-tap-label.hidden {
  display: none;
}

.hero-tap-label:hover .tap-label-pill {
  transform: scale(1.03);
}

.tap-label-pill {
  border-radius: 50rem;
  padding: 0.85rem 1.9rem;
  font-size: 1rem;
}

/* The prompt is text-only now, and xg-theme.css still paints the old tint glow on
   .tap-label-text - it existed to lift WHITE text off the dark hero, so on the cyan
   pill it reads as a pink smudge behind the dark ink. */
html.xg-tokens-apply .tap-label-pill .tap-label-text {
  text-shadow: none;
}

.tap-label-text .tap-label-tap {
  display: none;
}

/* Small screens: the pill tightens up. The prompt is already the short wording
   (CLICK TO PLAY / TAP TO PLAY) at every width, so nothing has to be hidden here
   any more - the old " THE GAME" tail and its .tap-label-long span are gone. */
@media (max-width: 575.98px) {
  .tap-label-pill {
    padding: 0.7rem 1.4rem;
    font-size: 0.9rem;
  }
}

@media (hover: none), (pointer: coarse) {
  .tap-label-text .tap-label-click {
    display: none;
  }

  .tap-label-text .tap-label-tap {
    display: inline;
  }
}