/* =============================================================================
 * demo-skin.css — LOCAL DEMO / SMOKE-TEST SKIN (not product styling).
 *
 * The crash client ships its FE components UNSTYLED by design (FE-9 Q3(b): no
 * CSS files, no className, styling deferred to an external operator/host layer
 * that targets the components' data-testid / data-* contract). This file IS that
 * external host skin — for local manual smoke-testing only. It touches NO React
 * component and NO test (it only matches stable data-testid selectors), so it is
 * fully removable: delete this file + the <link> in index.html.
 *
 * Loaded via <link rel="stylesheet" href="/demo-skin.css"> in index.html.
 * ========================================================================== */

:root {
  --skin-bg:      #0b0e13;
  --skin-panel:   rgba(22, 27, 34, 0.82);
  --skin-border:  #2b313b;
  --skin-text:    #e6edf3;
  --skin-muted:   #8b949e;
  --skin-win:     #3fb950;
  --skin-loss:    #f85149;
  --skin-void:    #8b949e;
  --skin-primary: var(--ss-brand-primary, #3b82f6);
  --skin-accent:  var(--ss-brand-accent,  #f4a547);
}

html, body {
  margin: 0;
  height: 100%;
  background: var(--skin-bg);
  color: var(--skin-text);
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  overflow: hidden;            /* single-screen overlay layout, no page scroll */
}
#root { height: 100%; }

/* ── Pixi game canvas → top "game region" band ────────────────────────────────
 * The game renders in a top band; the bet controls sit in an OPAQUE bar below
 * (see bet-panels) so the plane never flies behind the panels. FlightStage's
 * resizeTo targets this region, so app.screen + the camera viewport match the
 * band height and the plane is framed within it. */
/* The game canvas fills the WHOLE viewport so the sky/background is continuous
 * (never cut by the controls). The camera confines the plane to the upper
 * "playfield" (CAMERA_CONFIG.PLAYFIELD_BOTTOM) so it stays above the bet panels,
 * while the background still covers the full screen behind them. */
[data-testid="game-region"] { position: fixed; inset: 0; z-index: 0; }
[data-testid="game-region"] canvas[data-theme-id] { display: block; width: 100%; height: 100%; }

/* ── Recent crash-multiplier history → horizontal pill strip, top-center ──── */
[data-testid="recent-rounds-strip"] {
  position: fixed; top: 12px; left: 50%; transform: translateX(-50%);
  display: flex; gap: 6px; align-items: center; margin: 0; padding: 7px 12px;
  list-style: none; max-width: 92vw; overflow-x: auto; z-index: 30;
  background: var(--skin-panel); border: 1px solid var(--skin-border);
  border-radius: 999px; backdrop-filter: blur(8px);
}
[data-testid="recent-rounds-strip"][data-state="empty"] {
  color: var(--skin-muted); font-size: 13px; padding: 9px 16px;
}
[data-testid="recent-rounds-strip"] button {
  border: 0; cursor: pointer; border-radius: 999px; padding: 4px 11px;
  font-weight: 700; font-size: 13px; font-variant-numeric: tabular-nums;
  background: #21262d; color: var(--skin-text);
}
[data-multiplier-tier="low"]  button { color: #9aa4ae; }
[data-multiplier-tier="mid"]  button { color: #58a6ff; }
[data-multiplier-tier="high"] button { color: #1a1205; background: var(--skin-accent); }

/* ── Mute toggle → pill, top-right ────────────────────────────────────────── */
[data-testid="mute-button"] {
  position: fixed; top: 12px; right: 12px; z-index: 35;
  padding: 8px 14px; border: 1px solid var(--skin-border); border-radius: 999px; cursor: pointer;
  background: var(--skin-panel); color: var(--skin-text); font-size: 12px; font-weight: 700;
  letter-spacing: .02em; backdrop-filter: blur(8px);
}
[data-testid="mute-button"]:hover { border-color: var(--skin-primary); }
[data-testid="mute-button"][data-muted="true"] { color: var(--skin-muted); border-color: var(--skin-loss); }

/* ── Wallet balance → pill, top-left ──────────────────────────────────────── */
[data-testid="balance-display"] {
  position: fixed; top: 12px; left: 12px; z-index: 35;
  display: flex; align-items: baseline; gap: 8px;
  padding: 8px 16px; border-radius: 999px;
  background: var(--skin-panel); border: 1px solid var(--skin-border); backdrop-filter: blur(8px);
}
[data-testid="balance-label"] {
  font-size: 10px; text-transform: uppercase; letter-spacing: .06em; font-weight: 700; color: var(--skin-muted);
}
[data-testid="balance-amount"] {
  font-size: 16px; font-weight: 800; color: var(--skin-text); font-variant-numeric: tabular-nums;
}
[data-testid="balance-currency"] { font-size: 11px; font-weight: 700; color: var(--skin-muted); }

/* ── LOBBY "place your bet" countdown → accent pill under the strip ────────── */
[data-testid="lobby-countdown"] {
  position: fixed; top: 60px; left: 50%; transform: translateX(-50%); z-index: 25;
  padding: 8px 20px; border-radius: 999px;
  background: var(--skin-panel); border: 1px solid var(--skin-accent); backdrop-filter: blur(8px);
  color: var(--skin-accent); font-size: 14px; font-weight: 800; letter-spacing: .02em;
  font-variant-numeric: tabular-nums; box-shadow: 0 0 18px rgba(244, 165, 71, .22);
}

/* ── Crash "FLEW AWAY!" banner → transient bust announcement ──────────────────
 * Note (13) chrome. Sits in the gap between the multiplier readout (upper third)
 * and the plane's rest, springs in on bust, and self-clears after ~2.5s.       */
[data-testid="crashed-banner"] {
  position: fixed; top: 30%; left: 50%; transform: translate(-50%, -50%); z-index: 28;
  padding: 8px 26px; border-radius: 14px; pointer-events: none; white-space: nowrap;
  color: var(--skin-loss); font-size: clamp(28px, 4.4vw, 56px); font-weight: 900;
  letter-spacing: .04em; text-transform: uppercase; text-align: center;
  font-variant-numeric: tabular-nums;
  text-shadow: 0 0 24px rgba(248, 81, 73, .6), 0 2px 6px rgba(0, 0, 0, .55);
  animation: ss-crashed-pop 280ms cubic-bezier(.2, 1.45, .4, 1) both;
}
@keyframes ss-crashed-pop {
  0%   { transform: translate(-50%, -50%) scale(.55); opacity: 0; }
  60%  { transform: translate(-50%, -50%) scale(1.08); opacity: 1; }
  100% { transform: translate(-50%, -50%) scale(1); opacity: 1; }
}

/* ── Cashout celebration → transient green "you won" hero badge ───────────────
 * Note (13) chrome. Springs in centred on a confirmed cashout, self-clears.    */
[data-testid="cashout-celebration"] {
  position: fixed; top: 52%; left: 50%; transform: translate(-50%, -50%); z-index: 29;
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: 12px 30px; border-radius: 16px; pointer-events: none; white-space: nowrap;
  background: rgba(11, 14, 19, .55); border: 1px solid var(--skin-win);
  backdrop-filter: blur(6px); color: var(--skin-win); text-align: center;
  font-variant-numeric: tabular-nums; box-shadow: 0 0 28px rgba(63, 185, 80, .45);
  animation: ss-cashout-pop 300ms cubic-bezier(.2, 1.5, .4, 1) both;
}
[data-testid="cashout-celebration-multiplier"] {
  font-size: clamp(28px, 3.6vw, 46px); font-weight: 900; letter-spacing: .02em; line-height: 1;
}
[data-testid="cashout-celebration-payout"] { font-size: clamp(15px, 1.5vw, 20px); font-weight: 800; }
@keyframes ss-cashout-pop {
  0%   { transform: translate(-50%, -50%) scale(.6); opacity: 0; }
  60%  { transform: translate(-50%, -50%) scale(1.08); opacity: 1; }
  100% { transform: translate(-50%, -50%) scale(1); opacity: 1; }
}

/* ── Bet panels → translucent overlay over the continuous full-screen game ──
 * A soft bottom-up gradient scrim (NOT an opaque bar) keeps the panels readable
 * while the sky stays visible behind + below them — the plane is held above this
 * region by the camera's PLAYFIELD_BOTTOM floor, so it never hides behind them. */
[data-testid="bet-panels"] {
  position: fixed; left: 0; right: 0; bottom: 0; transform: none;
  display: flex; gap: 12px; justify-content: center; align-items: flex-end;
  height: 470px; padding: 0 12px 18px; box-sizing: border-box; z-index: 30;
  background: linear-gradient(to top, rgba(11, 14, 19, 0.92) 32%, rgba(11, 14, 19, 0) 100%);
  pointer-events: none;
}
[data-testid="bet-panel"] { pointer-events: auto; }
[data-testid="bet-panel"] {
  display: flex; flex-direction: column; gap: 10px; width: 272px; padding: 14px;
  background: var(--skin-panel); border: 1px solid var(--skin-border);
  border-radius: 16px; backdrop-filter: blur(10px);
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.45);
}
[data-testid="bet-input"] { display: flex; flex-direction: column; gap: 9px; }
[data-testid="bet-input"] > div { display: flex; flex-direction: column; gap: 6px; }
[data-testid="bet-input"] label {
  display: flex; flex-direction: column; gap: 5px;
  font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: var(--skin-muted);
}
/* hide the inline unit text (× / currency) that still lives inside a <label> */
[data-testid="bet-input"] label > span { position: absolute; opacity: 0; pointer-events: none; }

/* Bet / Auto tabs (override the column default for this direct-child div) */
[data-testid="bet-input"] [data-testid="bet-input-tabs"] { flex-direction: row; gap: 6px; }
[data-testid="bet-input-tab"] {
  flex: 1 1 0; padding: 8px 0; border: 1px solid var(--skin-border); border-radius: 9px; cursor: pointer;
  background: #0d1117; color: var(--skin-muted); font-size: 13px; font-weight: 800;
  text-transform: uppercase; letter-spacing: .04em;
}
[data-testid="bet-input-tab"]:hover { color: var(--skin-text); }
[data-testid="bet-input-tab"][data-active="true"] {
  background: #1c2430; color: var(--skin-text); border-color: var(--skin-primary);
}
/* Auto-cashout target is revealed only by the Auto tab (keeps Bet view compact) */
[data-testid="bet-input"][data-mode="bet"] [data-testid="bet-input-autocashout-field"] { display: none; }

/* amount row: −  [ input ]  CUR  + */
[data-testid="bet-input-amount-row"] { display: flex; flex-direction: row; align-items: stretch; gap: 6px; }
[data-testid="bet-input-amount-dec"],
[data-testid="bet-input-amount-inc"] {
  flex: 0 0 38px; border: 1px solid var(--skin-border); border-radius: 9px; cursor: pointer;
  background: #0d1117; color: var(--skin-text); font-size: 20px; font-weight: 700; line-height: 1;
}
[data-testid="bet-input-amount-dec"]:hover,
[data-testid="bet-input-amount-inc"]:hover { background: #161b22; }
[data-testid="bet-input-amount-dec"]:disabled,
[data-testid="bet-input-amount-inc"]:disabled { opacity: .4; cursor: not-allowed; }
[data-testid="bet-input-amount"] {
  flex: 1 1 auto; min-width: 0; box-sizing: border-box; padding: 9px 11px;
  font-size: 19px; font-weight: 700; text-align: center;
  color: var(--skin-text); background: #0d1117;
  border: 1px solid var(--skin-border); border-radius: 9px; font-variant-numeric: tabular-nums;
}
[data-testid="bet-input-currency"] {
  display: flex; align-items: center; padding: 0 2px;
  font-size: 12px; font-weight: 700; color: var(--skin-muted);
}
[data-testid="bet-input-auto-cashout"] {
  width: 100%; box-sizing: border-box; padding: 9px 11px; font-size: 16px;
  color: var(--skin-text); background: #0d1117;
  border: 1px solid var(--skin-border); border-radius: 9px; font-variant-numeric: tabular-nums;
}
[data-testid="bet-input-amount"]:focus,
[data-testid="bet-input-auto-cashout"]:focus { outline: 2px solid var(--skin-primary); outline-offset: 0; }

/* quick-stake preset chips */
[data-testid="bet-input-quick-amounts"] { display: flex; flex-direction: row; gap: 6px; }
[data-testid="bet-input-quick-amount"] {
  flex: 1 1 0; padding: 7px 0; border: 1px solid var(--skin-border); border-radius: 8px; cursor: pointer;
  background: #161b22; color: var(--skin-text); font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums;
}
[data-testid="bet-input-quick-amount"]:hover { background: #21262d; border-color: var(--skin-primary); }
[data-testid="bet-input-quick-amount"]:disabled { opacity: .4; cursor: not-allowed; }

[data-testid="bet-input-amount-help"],
[data-testid="bet-input-auto-cashout-cap"] { font-size: 11px; color: var(--skin-muted); }
[data-testid="bet-input-amount-error"],
[data-testid="bet-input-auto-cashout-error"] { font-size: 11px; color: var(--skin-loss); }

[data-testid="bet-input-submit"] {
  margin-top: 2px; padding: 13px; border: 0; border-radius: 11px; cursor: pointer;
  font-size: 15px; font-weight: 800; letter-spacing: .02em;
  background: var(--skin-win); color: #04210e;
}
[data-testid="bet-input-submit"]:hover:not(:disabled) { filter: brightness(1.08); }
[data-testid="bet-input-submit"]:disabled { opacity: .4; cursor: not-allowed; }
/* queue mode (placing a bet for the NEXT round) → accent instead of green */
[data-testid="bet-input-submit"][data-queue-mode="true"] { background: var(--skin-accent); color: #1a1205; }

/* ── Queued "bet for next round" notice + cancel ──────────────────────────── */
[data-testid="bet-queue-notice"] {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  margin-top: 2px; padding: 7px 11px; border-radius: 9px; font-size: 12px;
  background: rgba(244, 165, 71, .12); border: 1px solid var(--skin-accent);
}
[data-testid="bet-queue-label"] { color: var(--skin-accent); font-weight: 700; font-variant-numeric: tabular-nums; }
[data-testid="bet-queue-cancel"] {
  border: 0; cursor: pointer; border-radius: 7px; padding: 4px 10px;
  background: #30363d; color: var(--skin-text); font-size: 11px; font-weight: 700;
}
[data-testid="bet-queue-cancel"]:hover { background: var(--skin-loss); color: #fff; }

/* Live potential payout shown above the Cash Out button (HELD, in flight) */
[data-testid="cashout-payout"] {
  display: flex; align-items: baseline; justify-content: center; gap: 6px;
  margin-top: 2px; padding: 2px 0; font-variant-numeric: tabular-nums;
}
[data-testid="cashout-payout-label"] {
  font-size: 10px; text-transform: uppercase; letter-spacing: .06em; font-weight: 700; color: var(--skin-muted);
}
[data-testid="cashout-payout-amount"] { font-size: 16px; font-weight: 800; color: var(--skin-win); }

[data-testid="cashout-button"] {
  padding: 13px; border: 0; border-radius: 11px; cursor: pointer; width: 100%;
  font-size: 15px; font-weight: 800; letter-spacing: .02em;
  background: var(--skin-accent); color: #1a1205;
}
/* Declutter: with no active bet the cashout button is a redundant greyed
   "Place a bet" duplicate of the primary submit — hide it. It reappears as the
   prominent CASH OUT action once a bet is HELD/CASHED. */
[data-testid="cashout-button"][data-bet-status="none"] { display: none; }
[data-testid="cashout-button"][data-bet-status="HELD"] {
  background: var(--skin-accent); color: #1a1205;
  box-shadow: 0 0 0 2px var(--skin-accent), 0 0 22px rgba(244, 165, 71, .4);
  animation: ss-cashout-pulse 1.1s ease-in-out infinite;
}
[data-testid="cashout-button"][data-bet-status="CASHED"] { background: var(--skin-win); color: #04210e; }
[data-testid="cashout-button"]:disabled { cursor: not-allowed; }
@keyframes ss-cashout-pulse {
  50% { box-shadow: 0 0 0 2px var(--skin-accent), 0 0 30px rgba(244, 165, 71, .65); }
}

/* ── Recent bet history → right-side panel ─────────────────────────────────── */
[data-testid="recent-history-list"] {
  position: fixed; right: 12px; top: 64px; width: 246px; max-height: 56vh; overflow-y: auto;
  margin: 0; padding: 8px; list-style: none; z-index: 30; font-size: 12px;
  background: var(--skin-panel); border: 1px solid var(--skin-border);
  border-radius: 14px; backdrop-filter: blur(8px);
}
[data-testid="recent-history-list"][data-state="empty"] { color: var(--skin-muted); padding: 14px; text-align: center; }
[data-testid="recent-history-list-entry"] {
  display: grid; grid-template-columns: 52px 1fr auto; gap: 8px; align-items: center;
  padding: 7px 8px; border-bottom: 1px solid rgba(255, 255, 255, .06);
  font-variant-numeric: tabular-nums;
}
[data-testid="recent-history-status"] {
  font-size: 10px; font-weight: 800; text-align: center; padding: 3px 0; border-radius: 6px;
}
[data-status="WON"]  [data-testid="recent-history-status"] { background: #03361a; color: var(--skin-win); }
[data-status="LOST"] [data-testid="recent-history-status"] { background: #3a0f0f; color: var(--skin-loss); }
[data-status="VOID"] [data-testid="recent-history-status"] { background: #21262d; color: var(--skin-void); }
[data-testid="recent-history-amount"]     { color: var(--skin-muted); font-size: 11px; }
[data-testid="recent-history-multiplier"] { color: var(--skin-accent); font-weight: 700; }
[data-testid="recent-history-payout"]     { font-weight: 700; }

/* ── Rejection banner → top-center toast ──────────────────────────────────── */
[data-testid="bet-rejection-banner"] {
  position: fixed; top: 56px; left: 50%; transform: translateX(-50%); z-index: 40;
  display: flex; gap: 12px; align-items: center; padding: 10px 14px; max-width: 90vw;
  background: #3a0f0f; border: 1px solid var(--skin-loss); border-radius: 10px;
  color: #ffd7d4; font-size: 13px;
}

/* ── Chat placeholder → tuck into the corner ──────────────────────────────── */
[data-testid="chat-placeholder"] {
  position: fixed; left: 12px; bottom: 12px; z-index: 5;
  font-size: 11px; color: var(--skin-muted); opacity: .5;
}

/* ── Mobile / portrait phones ─────────────────────────────────────────────────
 * The desktop layout fixes the bet-history panel and two 272px bet panels at
 * widths that overflow a phone. Reflow for narrow portrait: drop the detailed
 * history (the top multiplier strip still tells the story), drop the strip below
 * the balance/mute pills, and let the two bet panels share the viewport width. */
@media (max-width: 640px) {
  /* the 246px right-side bet-history panel covers the play area on a phone */
  [data-testid="recent-history-list"] { display: none; }
  [data-testid="chat-placeholder"]    { display: none; }

  /* strip sits below the balance/mute corner pills; the lobby "place your bet"
     pill drops into the mid play area (which is empty during lobby — the plane
     has flown away) so it no longer covers the centred multiplier readout +
     crash banner it used to overlap at top:104px. */
  [data-testid="recent-rounds-strip"] { top: 56px; max-width: 96vw; }
  [data-testid="lobby-countdown"]     { top: 40%; }

  /* two compact bet panels that share the width, side by side */
  [data-testid="bet-panels"] { height: auto; gap: 8px; padding: 0 8px 12px; }
  [data-testid="bet-panel"]  { width: auto; flex: 1 1 0; min-width: 0; padding: 10px; gap: 8px; }

  /* tighten the inner controls so each half-width panel stays usable */
  [data-testid="bet-input-amount-dec"],
  [data-testid="bet-input-amount-inc"] { flex-basis: 30px; font-size: 17px; }
  [data-testid="bet-input-amount"]      { font-size: 16px; padding: 8px 6px; }
  [data-testid="bet-input-currency"]    { font-size: 11px; }
  [data-testid="bet-input-quick-amount"]{ font-size: 12px; padding: 6px 0; }
  [data-testid="bet-input-submit"],
  [data-testid="cashout-button"]        { padding: 11px; font-size: 14px; }
  [data-testid="balance-display"]       { padding: 6px 11px; }
  [data-testid="balance-amount"]        { font-size: 14px; }
}