/* games-web/dice.css — the casino skin for VaultDice.
 *
 * Loaded AFTER styles.css/theme.css and only by this page, so the ~20 other games that
 * share those stylesheets are untouched.
 *
 * The dice themselves are drawn by roll3d.js on a transparent canvas; the card around
 * them comes from roll3d.css. Everything here is the table around the dice: chips,
 * stake row, outcome and the fairness proof.
 */

body {
  background:
    radial-gradient(120% 70% at 50% -10%, color-mix(in srgb, var(--brand) 85%, #000) 0%, #0b0e0c 45%, #080a09 100%) fixed;
  color: #f4ecff;
}

.container { max-width: 460px; }

/* ---- header ---- */
.topbar {
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  padding-bottom: 10px;
}
.topbar .logo {
  background: linear-gradient(100deg, var(--gold-2), var(--gold) 60%, var(--gold-deep));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.wallet .coins {
  background: rgba(255, 215, 106, 0.12);
  border: 1px solid rgba(255, 215, 106, 0.35);
  color: #ffd76a; border-radius: var(--r-pill, 999px); padding: 5px 12px; font-weight: 700;
}

/* ---- the panel ----
 * responsive.css sizes `.card` to 40x56px under 560px — a PLAYING-card rule that used to
 * collapse this page's <main class="card"> to ~42px on phones. That sheet now wraps its
 * component sizes in :where() (zero specificity), so this no longer has to fight it; the
 * rule stays as a belt-and-braces guard for a shell that must never be card-sized.
 */
main.card { width: auto; height: auto; }

main.card {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.02));
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 24px;
  box-shadow: 0 22px 60px rgba(0, 0, 0, 0.55);
}
main.card .title {
  background: linear-gradient(100deg, #ffd76a, #ff8ac4);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

/* ---- dice block: roll3d.js turns .dicewrap into its card and #dice into the slot ---- */
.dicewrap { margin: 14px 0 10px; }
/* Size the host itself, NOT `#dice.r3d-slot`: the stage only anchors to an element that
   already has a box, and it is the anchoring that adds `.r3d-slot`. Keying the size off
   that class is a chicken-and-egg — this page's .dice computes to zero width, so the
   canvas never appeared at all. */
html.r3d-on #dice {
  display: block;
  width: min(260px, 78vw);
  height: 150px;
  margin: 0 auto;
}
/* the 2D fallback keeps its own look when there is no WebGL */
html:not(.r3d-on) .dice { display: flex; gap: 14px; justify-content: center; font-size: 54px; }

.sum {
  text-align: center; font-family: "Sora", system-ui, sans-serif; font-weight: 700;
  letter-spacing: 0.04em; color: #cbb8e6; margin-bottom: 14px;
}

/* ---- bet chips ---- */
.bets { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 14px; }
.bet {
  cursor: pointer; font-family: "Sora", system-ui, sans-serif; font-weight: 700; font-size: 12.5px;
  color: #e9dcff; text-align: center; line-height: 1.3;
  padding: 12px 6px; border-radius: var(--r-3, 16px);
  border: 2px dashed rgba(255, 255, 255, 0.18);
  background: rgba(255, 255, 255, 0.04);
  transition: transform 0.12s cubic-bezier(0.2, 0.8, 0.2, 1), border-color 0.2s, background 0.2s;
}
.bet:hover { transform: translateY(-2px); border-color: rgba(255, 215, 106, 0.5); }
.bet.active {
  border-style: solid;
  border-color: #ffd76a;
  background: linear-gradient(180deg, rgba(255, 215, 106, 0.22), rgba(255, 215, 106, 0.06));
  color: #fff6dc;
  box-shadow: 0 0 0 4px rgba(255, 215, 106, 0.1), 0 8px 20px rgba(255, 215, 106, 0.15);
}

/* ---- stake + seed rows ---- */
.row { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.row label { color: #b9a8d6; font-size: 12px; }
.input {
  flex: 1; max-width: 58%;
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: var(--r-2, 12px); padding: 10px 12px; color: #f4ecff;
  font-family: ui-monospace, Consolas, monospace; font-size: 13px;
}
.input:focus { outline: none; border-color: #ffd76a; box-shadow: 0 0 0 3px rgba(255, 215, 106, 0.18); }

/* ---- outcome ---- */
.outcome {
  margin-top: 14px; text-align: center; border-radius: var(--r-3, 16px); padding: 12px;
  font-family: "Sora", system-ui, sans-serif; font-weight: 800; font-size: 17px;
}
.outcome.win {
  color: #0d2a17; background: linear-gradient(135deg, #7cf7c0, #24d17a);
  box-shadow: 0 10px 26px rgba(36, 209, 122, 0.28);
}
.outcome.lose {
  color: #ffd9e2; background: rgba(255, 92, 138, 0.12); border: 1px solid rgba(255, 92, 138, 0.35);
}

/* ---- fairness proof: this is the product, so it stays legible ---- */
.proof {
  margin-top: 16px; border: 1px solid rgba(255, 255, 255, 0.1); border-radius: var(--r-3, 16px);
  padding: 10px 12px; background: rgba(0, 0, 0, 0.28);
}
.proof summary { cursor: pointer; font-family: "Sora", system-ui, sans-serif; font-weight: 700; font-size: 13px; color: #cbb8e6; }
.verline { font-size: 12.5px; margin-top: 6px; }
.verline.good { color: #7cf7c0; }
.verline.bad { color: #ff8aa6; }
.verbadge {
  display: inline-block; margin-top: 8px; padding: 4px 10px; border-radius: var(--r-pill, 999px);
  font-family: "Sora", system-ui, sans-serif; font-weight: 800; font-size: 11px; letter-spacing: 0.08em;
}
.verbadge.good { color: #08331f; background: #7cf7c0; }
.verbadge.bad { color: #3a0a15; background: #ff8aa6; }
.mono {
  margin-top: 10px; padding: 10px; border-radius: var(--r-2, 12px); overflow-x: auto;
  background: rgba(0, 0, 0, 0.4); color: #b9a8d6;
  font-family: ui-monospace, Consolas, monospace; font-size: 11px; line-height: 1.6;
}