/* ============================================================
   casino.css - Casino page and casino promo cards
   ============================================================ */
/* ---------- casino ---------- */
.casino-hero{background:linear-gradient(115deg,#160a2e,#3a0f4b);}
.casino-hero .eyebrow{color:var(--gold)}
.game-rail{display:grid;grid-template-columns:repeat(6,1fr);gap:12px}
@media(max-width:980px){.game-rail{grid-template-columns:repeat(3,1fr)}}
.game-tile{border-radius:10px;overflow:hidden;background:#12142b;color:#fff;position:relative;box-shadow:var(--shadow)}
.game-tile .art{height:92px;display:flex;align-items:center;justify-content:center;font-size:26px;font-weight:900;text-align:center;padding:6px}
.game-tile-img{min-height:150px;background-size:cover;background-position:center}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
/* DARK-THEME PASS (ui-ux, 15 Oct 2026): this strip was background:#fff with
   color:var(--ink) -- and R-012 (26 Sep) made --ink white by default, so
   every game tile's caption rendered white on white. --panel-tile is the
   theme's own raised-tile surface (#132748 dark / #f8f9fc light), legible
   under --ink in both. The tile body (#12142b) and the hero gradient are
   brand values, dark in both themes on purpose; the handoff PREVIEW dialog
   below is deliberately plain and dark in both themes (its own comment). */
.game-tile .meta{padding:8px 10px;font-size:11.5px;font-weight:700;background:var(--panel-tile);color:var(--ink)}
.game-tile .meta small{display:block;color:var(--muted);font-weight:500}
.game-tile .live-badge{position:absolute;top:6px;left:6px;background:var(--live);color:#fff;font-size:8.5px;font-weight:800;padding:2px 5px;border-radius:4px}


/* ===========================================================================
 * Casino handoff PREVIEW dialog (core_casino.js).
 *
 * An integration demonstration, not a game surface: it shows the parameters
 * Lepep holds at the handoff point and states what Bitville still owes. It is
 * styled deliberately plainly — it should not read as a promotional panel,
 * because a screenshot of it goes to a third party's engineers.
 * ======================================================================== */
.cp-modal{position:fixed;inset:0;z-index:9000;display:flex;align-items:center;justify-content:center;padding:16px}
.cp-backdrop{position:absolute;inset:0;background:rgba(0,0,0,.66)}
.cp-panel{position:relative;max-width:640px;width:100%;max-height:88vh;overflow:auto;
  background:#12161f;color:#e8eaf0;border:1px solid #2a3346;border-radius:12px;padding:20px 22px}
.cp-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:6px}
.cp-head h3{margin:0;font-size:1.05rem;letter-spacing:.02em}
.cp-x{background:none;border:0;color:#9aa4b8;font-size:1.5rem;line-height:1;cursor:pointer;padding:0 4px}
.cp-x:hover{color:#e8eaf0}
.cp-lead{margin:.4rem 0 1rem;font-size:.92rem;color:#c3cadb}
.cp-grid{border-top:1px solid #232c3d}
.cp-row{display:flex;gap:12px;justify-content:space-between;align-items:baseline;
  padding:.55rem 0;border-bottom:1px solid #1c2434}
.cp-k{color:#8e99b0;font-size:.82rem;text-transform:uppercase;letter-spacing:.05em;flex:0 0 auto}
.cp-v{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.9rem;
  word-break:break-all;text-align:right}
.cp-note{font-size:.78rem;color:#8e99b0;padding:0 0 .55rem;line-height:1.45}
.cp-ask{margin-top:1rem;padding:12px 14px;background:#171c28;border:1px solid #263047;border-radius:8px}
.cp-ask h4{margin:0 0 .5rem;font-size:.85rem;text-transform:uppercase;letter-spacing:.06em;color:#d8b25a}
.cp-ask ul{margin:.4rem 0 .6rem;padding-left:1.1rem}
.cp-ask li{margin:.22rem 0;font-size:.86rem}
.cp-ask code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.82rem;
  background:#0d1119;padding:.1rem .35rem;border-radius:4px;word-break:break-all}
.cp-q{margin:.45rem 0;font-size:.86rem;color:#c3cadb}
.cp-why{margin:.45rem 0;font-size:.8rem;color:#8e99b0;line-height:1.5}
.cp-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:1rem}
.cp-foot{margin:.9rem 0 0;font-size:.75rem;color:#7b869c;line-height:1.5}
.cp-foot code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace}
.btn-ghost{background:transparent;border:1px solid #3a4560;color:#c3cadb}
.btn-ghost:hover{border-color:#5a6a8f}

@media (max-width:520px){
  .cp-row{flex-direction:column;gap:2px}
  .cp-v{text-align:left}
}

/* ---------------------------------------------------------------------------
 * Bitville call trace — added 2026-09-23.
 *
 * Collapsed by default. It is diagnostic surface shown to an operator who is
 * demonstrating the integration, not something a punter needs in their way.
 *
 * `white-space: pre-wrap` and `word-break: break-all` because a JSON body with
 * a long token-shaped value must WRAP rather than widen the panel — a
 * horizontally scrolling <pre> inside a modal is how the interesting field
 * ends up off-screen in the screenshot someone sends to the partner.
 * ------------------------------------------------------------------------- */
.casino-trace { margin-top: .6rem; font-size: .82rem; }
.casino-trace > summary { cursor: pointer; opacity: .8; padding: .25rem 0; }
.cp-call { border-left: 2px solid rgba(255,255,255,.18); padding-left: .6rem; margin: .5rem 0; }
.cp-call-head { font-weight: 600; opacity: .9; margin-bottom: .25rem; }
.cp-json {
  background: rgba(0,0,0,.28);
  border-radius: 4px;
  padding: .45rem .6rem;
  margin: .25rem 0;
  white-space: pre-wrap;
  word-break: break-all;
  max-height: 16rem;
  overflow-y: auto;
}