/* trial-mode.css — coach overlay, one-control spotlight, bespoke match-end, landing.
   Deliberately minimal/unstyled placeholder. The fork's reskin owns the real look. */

/* Hide board affordances whose handler modules aren't loaded in the trial, so they
   aren't dead buttons: the ⋯ board menu (deck-controls.js), the "How to play" toggle
   + help (quick-rules-panel.js), and the desktop console chips. */
[data-gv2-board-menu],
.gv2-ca-rules,
.gv2-ca-help,
.gv2-console-chip { display: none !important; }

/* ---- Casino backdrop (Lucky Jack, 2026-07-16) -------------------------------
   The trial is the anonymous front door (server.js 302s bare `/` here), so it
   wears the LUCKY'S CASINO neon scene rather than the purple felt every real
   gameboard wears. Two things make that stick, and both are load-bearing:

   1. `body.trial-page` (/auth) makes game-ui.js#applyBoardFelt skip this
      page. Without it the trial renders through the same renderFromState
      pipeline as 1v1 and would add gv2-1v1-bg-active, covering this scene.
   2. The `.gv2-page.gv2-page` doubling below is NOT redundant. game-v2.css's
      portrait rule `.gv2-page.gv2-page:not([data-mode="campaign"])` (0,3,0)
      paints opaque felt ON THE PAGE at <=767px portrait, which would hide the
      body scene. `body.trial-page .gv2-page.gv2-page` is (0,3,1) and wins.
      Do not rely on stylesheet order alone — specificity is what holds here.

   Scrim: the scene is bright and busy and the board's cards + coach copy sit
   over it. ~62% dark keeps foreground text legible. No `fixed` attachment —
   the trial board is height-pinned (100dvh, overflow:hidden) so there is
   nothing to park against, and `fixed` is unreliable in iOS WKWebView. ---- */
body.trial-page {
  background:
    linear-gradient(rgba(10, 6, 14, 0.62), rgba(10, 6, 14, 0.62)),
    url('/images/lucky-jack/casino-bg.jpg') center / cover no-repeat;
  background-color: var(--ink);
}
body.trial-page .gv2-page.gv2-page { background: transparent; }

/* ---- coach card (guidance / explainer copy) ---- */
/* Positioned by JS (trial-engine positionCoach): it glides to sit adjacent to the ringed control,
   and CENTERS in the eyeline (the band between the two player areas) when there's no control target
   — so setup / FH-FF explainer copy reads where the action is, not glued to the screen top. The
   top:50%/left:50% here is only the pre-JS initial (first paint before positionCoach runs). z-index
   sits ABOVE the modal layer (choosers 9150 / countdown 9300) so the hint stays visible when it
   points at a chooser tile; below toast (10000). display:none at match. Bigger/bolder (2026-07-16). */
.trial-coach {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 9600;
  max-width: min(640px, 94vw);
  pointer-events: none;
  transition: top 0.25s ease, left 0.25s ease;
}
.trial-coach-inner {
  background: rgba(16, 14, 10, 0.96);
  color: #f6efdd;
  border: 2px solid #c79a37;
  border-radius: 16px;
  padding: 18px 26px;
  font: 500 18px/1.5 system-ui, sans-serif;
  box-shadow: 0 12px 44px rgba(0, 0, 0, 0.6);
  text-align: center;
}
.trial-coach-inner b { color: #f5cc63; }
/* Click-to-skip, for the hold's duration ONLY. .trial-coach is pointer-events:none
   (:52) so there is no click surface otherwise. A blanket pointer-events:auto is not
   acceptable — .trial-coach (z-index 9600) sits above the chooser layer (9150) and
   positionCoach parks it adjacent to chooser tiles, so it would intercept FC/SW tile
   clicks on every modal beat. cursor:pointer is the only discoverability cue: the
   pill has no hover state and its text does not change during the hold. */
.trial-coach.is-holdable .trial-coach-inner { pointer-events: auto; cursor: pointer; }

/* ---- highlight: ring the one live control (the board dim/scrim was removed 2026-07-16) ---- */
/* The ring is the element's OWN box-shadow (NOT a ::after pseudo): the HIT/STAND buttons
   are overflow:hidden (game-v2.css:547), which clips a descendant pseudo's glow but never
   the element's own outset box-shadow. No !important on the base so the animation actually
   pulses — a running CSS animation (animation origin) beats the controls' normal-author
   box-shadows at any specificity. The reduced-motion block below re-adds !important so the
   STATIC (non-animated) ring still wins the cascade when the animation is off. */
.trial-live {
  position: relative;
  z-index: 3500;
  box-shadow: 0 0 0 3px #f0c260, 0 0 22px 4px rgba(240, 194, 96, 0.65);
  animation: trial-pulse 1.2s ease-in-out infinite;
}
@keyframes trial-pulse {
  0%, 100% { box-shadow: 0 0 0 3px #f0c260, 0 0 18px 3px rgba(240, 194, 96, 0.5); }
  50%      { box-shadow: 0 0 0 4px #ffd873, 0 0 30px 8px rgba(240, 194, 96, 0.85); }
}
@media (prefers-reduced-motion: reduce) {
  .trial-live {
    animation: none;
    box-shadow: 0 0 0 3px #f0c260, 0 0 22px 4px rgba(240, 194, 96, 0.65) !important;
  }
  /* Kill the coach glide too — the hint jumps to each target instead of sliding. */
  .trial-coach { transition: none; }
}

/* ---- bespoke match-end ---- */
.trial-matchend {
  position: fixed;
  inset: 0;
  z-index: 5000;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(8, 7, 5, 0.82);
  backdrop-filter: blur(3px);
}
.trial-me-card {
  width: min(420px, 92vw);
  background: #17140f;
  border: 1px solid #b8892b;
  border-radius: 16px;
  padding: 26px 24px;
  text-align: center;
  color: #f4ecd8;
  font-family: system-ui, sans-serif;
  box-shadow: 0 18px 60px rgba(0, 0, 0, 0.6);
}
.trial-me-title { font-size: 26px; font-weight: 800; color: #f0c260; }
.trial-me-sub { margin: 8px 0 18px; opacity: 0.9; font-size: 15px; line-height: 1.4; }
/* Sits under the success button and names the 1800ms auto-redirect. Quieter than
   .trial-me-sub on purpose — it is a status line, not a thing to act on. */
.trial-me-redirect { margin-top: 12px; font-size: 13px; opacity: 0.72; }
.trial-me-methods { display: flex; flex-direction: column; gap: 10px; }
.trial-me-btn {
  padding: 12px 14px;
  border-radius: 10px;
  border: 1px solid #6a5a34;
  background: #241f16;
  color: #f4ecd8;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
}
.trial-me-btn:hover:not(:disabled) { background: #2e2718; }
.trial-me-btn:disabled { opacity: 0.5; cursor: default; }
.trial-me-primary { background: #b8892b; border-color: #d7a63c; color: #17140f; }
.trial-me-primary:hover { background: #cf9c33; }
.trial-me-soon { font-size: 11px; opacity: 0.7; font-weight: 400; }
.trial-me-tos { margin-top: 14px; font-size: 12px; opacity: 0.7; }
.trial-me-tos a { color: #f0c260; }
.trial-me-back {
  margin-top: 16px;
  background: none;
  border: none;
  color: #cbb98f;
  font-size: 13px;
  cursor: pointer;
  text-decoration: underline;
}
.trial-me-phase2 { margin-top: 14px; font-size: 12px; color: #f0c260; opacity: 0.9; }

/* ---- shared referral input (above the methods) ---- */
.trial-me-referral {
  width: 100%;
  box-sizing: border-box;
  margin-bottom: 14px;
  padding: 10px 12px;
  border-radius: 9px;
  border: 1px solid #6a5a34;
  background: #100e0a;
  color: #f4ecd8;
  font-size: 14px;
}
.trial-me-referral::placeholder { color: #8a7d5c; }

/* ---- sign-up panels (trial-signup.js) ---- */
.trial-su-sub { margin: 6px 0 16px; opacity: 0.85; font-size: 14px; line-height: 1.4; }
.trial-su-label {
  display: block;
  text-align: left;
  margin: 10px 0 4px;
  font-size: 12px;
  font-weight: 600;
  color: #cbb98f;
}
.trial-su-input {
  width: 100%;
  box-sizing: border-box;
  padding: 11px 12px;
  border-radius: 9px;
  border: 1px solid #6a5a34;
  background: #100e0a;
  color: #f4ecd8;
  font-size: 15px;
}
.trial-su-input:focus { outline: none; border-color: #d7a63c; }
.trial-su-hint { min-height: 16px; text-align: left; font-size: 12px; margin-top: 4px; opacity: 0.8; }
.trial-su-ok { color: #7fc98a; opacity: 1; }
.trial-su-bad { color: #e0a06a; opacity: 1; }
.trial-su-err { min-height: 16px; text-align: left; font-size: 13px; margin: 8px 0; color: #e6795f; }
.trial-su-sugg-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 2px 0 6px; }
.trial-su-sugg-label { font-size: 12px; opacity: 0.7; }
.trial-su-sugg {
  padding: 4px 9px;
  border-radius: 7px;
  border: 1px solid #6a5a34;
  background: #241f16;
  color: #f0c260;
  font-size: 12px;
  cursor: pointer;
}
.trial-su-sugg:hover { background: #2e2718; }
.trial-me-card > .trial-me-primary { margin-top: 12px; width: 100%; }
.trial-su-check { font-size: 44px; color: #7fc98a; margin: 10px 0; }

/* ---- placeholder landing page ---- */
.trial-landing {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #0f0d0a;
  color: #f4ecd8;
  font-family: system-ui, sans-serif;
  text-align: center;
  padding: 24px;
}
.trial-landing-inner { max-width: 520px; }
.trial-landing h1 { font-size: 34px; color: #f0c260; margin-bottom: 12px; }
.trial-landing p { font-size: 17px; line-height: 1.5; opacity: 0.9; margin-bottom: 26px; }
.trial-play {
  display: inline-block;
  padding: 15px 34px;
  border-radius: 12px;
  background: #b8892b;
  color: #17140f;
  font-size: 18px;
  font-weight: 800;
  text-decoration: none;
  border: 1px solid #d7a63c;
  cursor: pointer;
}
.trial-play:hover { background: #cf9c33; }

/* ---- Top-right controls (music mute toggle + "Skip Demo") ---- */
/* The group carries the fixed position + z-index (was on .trial-skip-demo). z-index above the board
   so both stay clickable during the demo, but below the match-end overlay (5000) so that card cleanly
   covers them after a skip. */
.trial-top-controls {
  position: fixed;
  top: 10px;
  right: 10px;
  z-index: 4000;
  display: flex;
  align-items: center;
  gap: 8px;
}

/* ---- "Skip Demo" (jumps to the sign-up / sign-back-in screen) ---- */

/* ---- Music/sound mute toggle (matches the Skip pill; label + on/off state) ---- */
.trial-mute-toggle {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  background: rgba(18, 16, 12, 0.82);
  color: #f4ecd8;
  border: 1px solid #b8892b;
  border-radius: 999px;
  padding: 7px 14px;
  cursor: pointer;
}
.trial-mute-toggle:hover { background: rgba(46, 39, 24, 0.92); }
.trial-mute-toggle:focus-visible { outline: 2px solid #ffd873; outline-offset: 2px; }
.trial-mute-toggle .trial-mute-label {
  font: 600 10px/1 system-ui, sans-serif;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #b8a98c;
}
.trial-mute-toggle .trial-mute-state {
  font: 700 13px/1 system-ui, sans-serif;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
/* Sound ON → gold (active); muted → dim, so the state reads at a glance. */
.trial-mute-toggle[data-muted="false"] .trial-mute-state { color: #ffd873; }
.trial-mute-toggle[data-muted="true"]  .trial-mute-state { color: #b8a98c; }

/* ---- "Sign back in" line on the match-end / auth card ---- */
.trial-me-signin { margin-top: 12px; font-size: 13px; opacity: 0.85; }
.trial-me-signin a { color: #f0c260; text-decoration: underline; }

/* ---- Welcome modal (landing intro; "Deal me in" dismisses it → the demo starts) ---- */
/* z-index above the board, the skip button (4000), match-end (5000) and the coach (9600) so it's
   the only thing visible on landing; set display:none by trial-start.js on "Deal me in". */

/* ---- Item 18 — swap chooser: selectable = PURPLE, selected = GOLD (Matt, 2026-07-16) ----
   "for the trial, we should make the swap glow be purple before the user clicks. rn there is no
   distinction between a card that is clicked vs unclicked." / "selectable should be purple,
   selected should be gold."

   The defect is the missing AFFORDANCE, not the colour. `game-v2.css:1330` gives an unselected tile
   `border: 2px solid transparent` — so on touch (where there is no :hover) a tile looks inert.
   Nothing says "tap me", and the only feedback arrives brass, AFTER you commit.

   Lives here rather than in game-v2.css because Matt scoped it "for the trial", and game-v2.css is
   the BOARD lane's file this batch. The live 1v1/campaign chooser has the SAME missing affordance —
   `game-v2.css:1330` gives every unselected tile a transparent border, everywhere, not just here.
   That is a confirmed defect in the live game, and it is raised as a FLAG for Matt in docs/TODO.md
   (Follow Up Items) rather than fixed here: expanding a trial-scoped ask into the live board is a
   product call, not this batch's. Do not "helpfully" delete the body.trial-page prefix.

   ⚠️ On `--purple`, because this is a genuine trap that just does NOT happen to bite here:
   `game-v2.css:5498` re-aliases `--purple` to `var(--brass)` (and `--orange` to oxblood) under
   `@media (max-width:767px) and (orientation:portrait)`. It is a semantic "your side" token, not a
   colour. Painting a selectable state with it INSIDE the board would render gold on mobile portrait
   — identical to selected, the exact inverse of this ask.
   It cannot reach us: that rule is scoped to `.gv2-page[data-my-idx="0"]`, and the choosers mount on
   `document.body`, OUTSIDE `.gv2-page` (`chooser-sw.js:186,205` — its own comment says so). So on a
   chooser tile `--purple-hi` resolves from `:root` (`game-v2.css:29`) = #a07ec0, real purple, at
   every viewport. Using the token is therefore correct AND drift-proof; hand-pinning the literal
   would silently desync the trial from the palette on the next retune.
   **If a chooser is ever moved inside `.gv2-page`, this breaks silently — re-read :5498 first.**

   Two selectors, both load-bearing, because a "selectable" glow on something you cannot click is a lie:
     - `[data-gv2-chooser-side]` — affirmative marker. `renderTiles` stamps it on every clickable
       tile (`chooser-sw.js:148`); the phase-2 outcome tiles ("You gave"/"They gave",
       `chooser-sw.js:405-412`) render a bare `.gv2-overlay-chooser-tile` WITHOUT it. A `:not()`
       guard alone would paint those, since that card carries no `data-pov` either.
     - `:not([data-pov="passive"])` — the phase-1 passive mirror (watching Lucky swap) DOES use
       renderTiles, so its tiles carry the marker, but it is `pointer-events:none`
       (`game-v2.css:6427`). Both guards are needed; neither covers the other's case.

   Two different hues, not two lightnesses of one, so the states differ at a glance. */
body.trial-page {
  --trial-swap-selectable: var(--purple-hi);  /* :root purple — the board re-alias can't reach a body-mounted chooser */
  --trial-swap-selected: var(--brass-hi);     /* the existing Lucky Jack gold — not a new hex */
}
/* Glows are color-mix'd off the SAME tokens as the borders. A hand-written rgba() here would undo
   the whole point of using tokens above: a palette retune would move the border and leave the glow
   behind, on the one element whose job is to show two states apart. (color-mix is already in use in
   this codebase, e.g. achievements.css:891.) */
body.trial-page .gv2-overlay-chooser-card:not([data-pov="passive"]) .gv2-overlay-chooser-tile[data-gv2-chooser-side] {
  border-color: var(--trial-swap-selectable);
  box-shadow: 0 0 10px color-mix(in srgb, var(--trial-swap-selectable) 38%, transparent);
}
body.trial-page .gv2-overlay-chooser-card:not([data-pov="passive"]) .gv2-overlay-chooser-tile[data-gv2-chooser-side].gv2-chooser-selected {
  border-color: var(--trial-swap-selected);
  box-shadow: 0 0 18px color-mix(in srgb, var(--trial-swap-selected) 85%, transparent);
}