/* ============================================================================
 * VYNUMO — native board for BloodCrimes
 * ============================================================================
 * The game runs INLINE in the /vynumo page (no iframe). Everything here is
 * scoped under .bc-vynumo so it can never touch another BloodCrimes page.
 *
 * The tile progression is Vynumo's BloodCrimes theme (criminal wealth):
 *   2 small cash · 4 cash · 8 stack · 16 larger stack · 32 bundle · 64 bag
 *   128 briefcase · 256 loot · 512 gold · 1024 vault · 2048 empire
 * The value always stays the most readable pixel on the board.
 * ========================================================================== */

.bc-vynumo {
  /* Board geometry — one board size drives every offset. */
  --v-size: min(100%, 460px);  /* JS refines this to the panel's content width */
  --v-pad: 10px;
  --v-gap: 9px;
  --board-cell: calc((var(--v-size) - 2 * var(--v-pad) - 3 * var(--v-gap)) / 4);
  --v-step: calc(var(--board-cell) + var(--v-gap));

  /* Palette (BloodCrimes tokens) */
  --board-bg: #101014;
  --grid-cell-bg: rgba(255, 255, 255, 0.035);
  --tile-shadow: rgba(0, 0, 0, 0.5);
  --overlay-bg: rgba(9, 9, 11, 0.94);
  --bc-crimson: #B51220;
  --bc-crimson-hot: #E11D2A;
  --bc-gold: #C99A38;
  --bc-gold-light: #E0BD73;
  --bc-edge: rgba(255, 255, 255, 0.1);
  --bc-edge-gold: rgba(224, 189, 115, 0.5);

  --tile-2-bg: #1E1E24;    --tile-2-fg: #D6D6DC;
  --tile-4-bg: #262229;    --tile-4-fg: #E6E2EA;
  --tile-8-bg: #33302C;    --tile-8-fg: #F0EBE2;
  --tile-16-bg: #453B2C;   --tile-16-fg: #F6F0E3;
  --tile-32-bg: #5A4726;   --tile-32-fg: #FBF4E4;
  --tile-64-bg: #6E5423;   --tile-64-fg: #FFF8E8;
  --tile-128-bg: #8A6524;  --tile-128-fg: #FFFBF0;
  --tile-256-bg: #A67B29;  --tile-256-fg: #FFFDF6;
  --tile-512-bg: #C99A38;  --tile-512-fg: #1A1408;
  --tile-1024-bg: #B51220; --tile-1024-fg: #FFF3F0;
  --tile-2048-bg: #E11D2A; --tile-2048-fg: #FFF8F0;
  --tile-super-bg: #1B1B20; --tile-super-fg: #E0BD73;
}

/* The board panel keeps the standard card look but trims its side padding on
   phones, so the board can use every available pixel without overflowing.
   Scoped to this one card body — no other BloodCrimes page is affected. */
.card-body.bc-vynumo-stage { padding: 14px 10px; }
@media (min-width: 576px) { .card-body.bc-vynumo-stage { padding: 1.25rem; } }

/* ------------------------------------------------------------- HUD ------ */

.bc-vynumo .vynumo-hud {
  display: flex;
  align-items: stretch;
  justify-content: center;
  gap: 10px;
  margin: 0 auto 12px;
  width: var(--v-size);
}

.bc-vynumo .score-container,
.bc-vynumo .best-container {
  position: relative;
  flex: 1 1 0;
  min-width: 0;
  padding: 8px 12px;
  background: rgba(255, 255, 255, 0.045);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 6px;
  font-family: 'Barlow Condensed', 'Inter', sans-serif;
  font-size: 1.6rem;
  font-weight: 700;
  line-height: 1.15;
  text-align: center;
  color: #F4F4F5;
  font-variant-numeric: tabular-nums;
}

.bc-vynumo .score-container::after,
.bc-vynumo .best-container::after {
  position: absolute;
  top: 4px;
  left: 0;
  right: 0;
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #9A9AA2;
}

.bc-vynumo .score-container::after { content: "Score"; }
.bc-vynumo .best-container::after { content: "Best"; }

.bc-vynumo .score-addition {
  position: absolute;
  right: 12px;
  top: 18px;
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--bc-gold-light);
  z-index: 10;
  animation: bc-score-pop 520ms ease-in;
  animation-fill-mode: both;
}

@keyframes bc-score-pop {
  0%   { opacity: 1; transform: translateY(0); }
  100% { opacity: 0; transform: translateY(-26px); }
}

.bc-vynumo .best-container.best-beaten {
  animation: bc-best-beaten 420ms ease;
  border-color: rgba(224, 189, 115, 0.5);
}

@keyframes bc-best-beaten {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.06); }
}

.bc-vynumo .pb-status {
  width: var(--v-size);
  margin: 0 auto 10px;
  font-size: 0.78rem;
  text-align: center;
  color: var(--bc-gold-light);
}
.bc-vynumo .pb-status.pb-hidden { display: none; }

/* ---------------------------------------------------------- Board ------ */

.bc-vynumo .game-container {
  position: relative;
  width: var(--v-size);
  height: var(--v-size);
  margin: 0 auto;
  padding: var(--v-pad);
  box-sizing: border-box;
  border-radius: 10px;
  background:
    radial-gradient(120% 90% at 50% 0%, rgba(181, 18, 32, 0.16), transparent 62%),
    var(--board-bg);
  border: 1px solid rgba(255, 255, 255, 0.07);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.04);
  cursor: default;
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}

.bc-vynumo .grid-container {
  position: absolute;
  z-index: 1;
  top: var(--v-pad);
  left: var(--v-pad);
}

.bc-vynumo .grid-row { margin-bottom: var(--v-gap); }
.bc-vynumo .grid-row:last-child { margin-bottom: 0; }
.bc-vynumo .grid-row::after { content: ""; display: block; clear: both; }

.bc-vynumo .grid-cell {
  float: left;
  width: var(--board-cell);
  height: var(--board-cell);
  margin-right: var(--v-gap);
  border-radius: 6px;
  background: var(--grid-cell-bg);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03);
}
.bc-vynumo .grid-cell:last-child { margin-right: 0; }

.bc-vynumo .tile-container {
  position: absolute;
  z-index: 2;
  top: var(--v-pad);
  left: var(--v-pad);
}

.bc-vynumo .tile,
.bc-vynumo .tile .tile-inner {
  width: var(--board-cell);
  height: var(--board-cell);
  line-height: var(--board-cell);
}

.bc-vynumo .tile {
  position: absolute;
  transition: transform 100ms ease-in-out;
}

.bc-vynumo .tile.tile-position-1-1 { transform: translate(0, 0); }
.bc-vynumo .tile.tile-position-2-1 { transform: translate(var(--v-step), 0); }
.bc-vynumo .tile.tile-position-3-1 { transform: translate(calc(var(--v-step) * 2), 0); }
.bc-vynumo .tile.tile-position-4-1 { transform: translate(calc(var(--v-step) * 3), 0); }

.bc-vynumo .tile.tile-position-1-2 { transform: translate(0, var(--v-step)); }
.bc-vynumo .tile.tile-position-2-2 { transform: translate(var(--v-step), var(--v-step)); }
.bc-vynumo .tile.tile-position-3-2 { transform: translate(calc(var(--v-step) * 2), var(--v-step)); }
.bc-vynumo .tile.tile-position-4-2 { transform: translate(calc(var(--v-step) * 3), var(--v-step)); }

.bc-vynumo .tile.tile-position-1-3 { transform: translate(0, calc(var(--v-step) * 2)); }
.bc-vynumo .tile.tile-position-2-3 { transform: translate(var(--v-step), calc(var(--v-step) * 2)); }
.bc-vynumo .tile.tile-position-3-3 { transform: translate(calc(var(--v-step) * 2), calc(var(--v-step) * 2)); }
.bc-vynumo .tile.tile-position-4-3 { transform: translate(calc(var(--v-step) * 3), calc(var(--v-step) * 2)); }

.bc-vynumo .tile.tile-position-1-4 { transform: translate(0, calc(var(--v-step) * 3)); }
.bc-vynumo .tile.tile-position-2-4 { transform: translate(var(--v-step), calc(var(--v-step) * 3)); }
.bc-vynumo .tile.tile-position-3-4 { transform: translate(calc(var(--v-step) * 2), calc(var(--v-step) * 3)); }
.bc-vynumo .tile.tile-position-4-4 { transform: translate(calc(var(--v-step) * 3), calc(var(--v-step) * 3)); }

@keyframes bc-tile-appear {
  0%   { opacity: 0; transform: scale(0.72); }
  100% { opacity: 1; transform: scale(1); }
}
.bc-vynumo .tile.tile-new .tile-inner { animation: bc-tile-appear 140ms ease-out; }

/* --------------------------------------------------- Tile surface ------ */

.bc-vynumo .tile .tile-inner {
  position: relative;
  z-index: 2;
  display: block;
  border-radius: 6px;
  background: var(--tile-bg, #1E1E24);
  color: var(--tile-fg, #D6D6DC);
  font-family: 'Barlow Condensed', 'Inter', sans-serif;
  font-size: calc(var(--board-cell) * 0.5);
  font-weight: 700;
  text-align: center;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
  box-shadow:
    0 5px 16px var(--tile-shadow),
    inset 0 0 0 1px var(--bc-edge);
  transition: box-shadow 160ms ease;
}

/* Decoration layer sits on the wrapper so it can never cover the value. */
.bc-vynumo .tile::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 6px;
  pointer-events: none;
  opacity: 0.9;
  z-index: 1;
}

.bc-vynumo .tile-2    .tile-inner { --tile-bg: var(--tile-2-bg);    --tile-fg: var(--tile-2-fg); }
.bc-vynumo .tile-4    .tile-inner { --tile-bg: var(--tile-4-bg);    --tile-fg: var(--tile-4-fg); }
.bc-vynumo .tile-8    .tile-inner { --tile-bg: var(--tile-8-bg);    --tile-fg: var(--tile-8-fg); }
.bc-vynumo .tile-16   .tile-inner { --tile-bg: var(--tile-16-bg);   --tile-fg: var(--tile-16-fg); }
.bc-vynumo .tile-32   .tile-inner { --tile-bg: var(--tile-32-bg);   --tile-fg: var(--tile-32-fg); }
.bc-vynumo .tile-64   .tile-inner { --tile-bg: var(--tile-64-bg);   --tile-fg: var(--tile-64-fg); }
.bc-vynumo .tile-128  .tile-inner { --tile-bg: var(--tile-128-bg);  --tile-fg: var(--tile-128-fg); }
.bc-vynumo .tile-256  .tile-inner { --tile-bg: var(--tile-256-bg);  --tile-fg: var(--tile-256-fg); }
.bc-vynumo .tile-512  .tile-inner { --tile-bg: var(--tile-512-bg);  --tile-fg: var(--tile-512-fg); }
.bc-vynumo .tile-1024 .tile-inner { --tile-bg: var(--tile-1024-bg); --tile-fg: var(--tile-1024-fg); }
.bc-vynumo .tile-2048 .tile-inner { --tile-bg: var(--tile-2048-bg); --tile-fg: var(--tile-2048-fg); }
.bc-vynumo .tile-super .tile-inner { --tile-bg: var(--tile-super-bg); --tile-fg: var(--tile-super-fg); }

/* ---- Low values (2–64): quiet, no ornament ---------------------------- */

.bc-vynumo .tile-2::before {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.045), transparent 62%);
}

.bc-vynumo .tile-4::before {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.05), transparent 62%),
    linear-gradient(90deg, transparent 16%, rgba(255, 255, 255, 0.09) 16%, rgba(255, 255, 255, 0.09) 84%, transparent 84%) center/100% 1px no-repeat;
  background-position: center, center calc(100% - 12px);
}

.bc-vynumo .tile-8::before {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.06), transparent 60%),
    repeating-linear-gradient(180deg, transparent 0 6px, rgba(255, 255, 255, 0.07) 6px 7px);
  background-position: center, bottom;
  background-size: 100% 100%, 100% 34%;
  background-repeat: no-repeat, no-repeat;
}

.bc-vynumo .tile-16::before {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.07), transparent 58%),
    repeating-linear-gradient(180deg, transparent 0 5px, rgba(255, 255, 255, 0.085) 5px 6px);
  background-position: center, bottom;
  background-size: 100% 100%, 100% 46%;
  background-repeat: no-repeat, no-repeat;
}

.bc-vynumo .tile-32::before {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.08), transparent 56%),
    linear-gradient(180deg, transparent 46%, rgba(0, 0, 0, 0.28) 46%, rgba(0, 0, 0, 0.28) 62%, transparent 62%);
}

.bc-vynumo .tile-64::before {
  background:
    radial-gradient(120% 62% at 50% 118%, rgba(0, 0, 0, 0.42) 0%, rgba(0, 0, 0, 0) 68%),
    linear-gradient(180deg, transparent 58%, rgba(255, 255, 255, 0.1) 58%, rgba(255, 255, 255, 0.1) 60%, transparent 60%),
    linear-gradient(90deg, transparent 44%, rgba(255, 255, 255, 0.08) 44%, rgba(255, 255, 255, 0.08) 56%, transparent 56%);
}

/* ---- Mid values (128–256): hardware and metal ------------------------- */

.bc-vynumo .tile-128::before {
  background:
    radial-gradient(circle at 50% 16%, rgba(26, 20, 8, 0.5) 0 2px, transparent 2px),
    linear-gradient(180deg, rgba(255, 255, 255, 0.1), transparent 40%),
    linear-gradient(180deg, transparent 62%, rgba(0, 0, 0, 0.22) 62%, rgba(0, 0, 0, 0.22) 66%, transparent 66%);
}
.bc-vynumo .tile-128 .tile-inner {
  box-shadow: 0 5px 16px var(--tile-shadow), inset 0 0 0 1px var(--bc-edge-gold);
}

.bc-vynumo .tile-256::before {
  background:
    radial-gradient(circle at 13% 13%, rgba(255, 255, 255, 0.4) 0 1.5px, transparent 1.5px),
    radial-gradient(circle at 87% 13%, rgba(255, 255, 255, 0.4) 0 1.5px, transparent 1.5px),
    radial-gradient(circle at 13% 87%, rgba(255, 255, 255, 0.28) 0 1.5px, transparent 1.5px),
    radial-gradient(circle at 87% 87%, rgba(255, 255, 255, 0.28) 0 1.5px, transparent 1.5px),
    linear-gradient(180deg, rgba(255, 255, 255, 0.13), transparent 44%);
}
.bc-vynumo .tile-256 .tile-inner {
  box-shadow:
    0 6px 20px rgba(0, 0, 0, 0.5),
    0 0 0 1px rgba(26, 20, 8, 0.35),
    inset 0 0 0 1px rgba(255, 255, 255, 0.28);
}

/* ---- High values (512+): genuinely impressive, still readable --------- */

.bc-vynumo .tile-512::before {
  background:
    linear-gradient(118deg, rgba(255, 255, 255, 0) 34%, rgba(255, 255, 255, 0.34) 47%, rgba(255, 255, 255, 0) 60%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.14), transparent 46%);
}
.bc-vynumo .tile-512 .tile-inner {
  box-shadow:
    0 6px 20px rgba(0, 0, 0, 0.48),
    0 0 22px rgba(201, 154, 56, 0.36),
    inset 0 0 0 1px rgba(255, 255, 255, 0.3);
}

.bc-vynumo .tile-1024::before {
  background:
    radial-gradient(circle at 50% 50%, transparent 0 22%, rgba(255, 255, 255, 0.14) 22%, rgba(255, 255, 255, 0.14) 24%, transparent 24%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.12), transparent 42%),
    repeating-linear-gradient(90deg, transparent 0 10px, rgba(0, 0, 0, 0.12) 10px 11px);
  opacity: 0.75;
}
.bc-vynumo .tile-1024 .tile-inner {
  box-shadow:
    0 7px 22px rgba(0, 0, 0, 0.55),
    0 0 26px rgba(181, 18, 32, 0.45),
    inset 0 0 0 1px rgba(255, 255, 255, 0.22);
}

.bc-vynumo .tile-2048::before {
  background:
    radial-gradient(circle at 50% 50%, rgba(255, 214, 130, 0.22) 0%, transparent 62%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.18), transparent 44%),
    linear-gradient(118deg, transparent 36%, rgba(255, 232, 176, 0.32) 48%, transparent 62%);
  opacity: 1;
}
.bc-vynumo .tile-2048 .tile-inner {
  box-shadow:
    0 8px 26px rgba(0, 0, 0, 0.55),
    0 0 34px rgba(225, 29, 42, 0.5),
    inset 0 0 0 1px rgba(224, 189, 115, 0.65);
}

.bc-vynumo .tile-super::before {
  background:
    radial-gradient(circle at 50% 50%, rgba(224, 189, 115, 0.2) 0%, transparent 66%),
    linear-gradient(180deg, rgba(224, 189, 115, 0.16), transparent 44%);
}
.bc-vynumo .tile-super .tile-inner {
  box-shadow:
    0 8px 26px rgba(0, 0, 0, 0.6),
    0 0 30px rgba(224, 189, 115, 0.4),
    inset 0 0 0 1px rgba(224, 189, 115, 0.55);
}

/* Number sizing: the value is the most important pixel on the board. */
.bc-vynumo .tile-128 .tile-inner,
.bc-vynumo .tile-256 .tile-inner,
.bc-vynumo .tile-512 .tile-inner { font-size: calc(var(--board-cell) * 0.44); }

.bc-vynumo .tile-1024 .tile-inner,
.bc-vynumo .tile-2048 .tile-inner {
  font-size: calc(var(--board-cell) * 0.36);
  letter-spacing: -0.03em;
}

.bc-vynumo .tile-super .tile-inner {
  font-size: calc(var(--board-cell) * 0.28);
  letter-spacing: -0.03em;
}

/* ---- Merge feedback: short, restrained, never slows play -------------- */

@keyframes bc-merge-pop {
  0%   { transform: scale(1); }
  42%  { transform: scale(1.07); }
  100% { transform: scale(1); }
}

@keyframes bc-merge-flash {
  0%   { box-shadow: 0 0 0 0 rgba(224, 189, 115, 0.55); }
  100% { box-shadow: 0 0 0 14px rgba(224, 189, 115, 0); }
}

.bc-vynumo .tile-merged .tile-inner { animation: bc-merge-pop 170ms ease-out; }

.bc-vynumo .tile-merged.tile-128 .tile-inner,
.bc-vynumo .tile-merged.tile-256 .tile-inner,
.bc-vynumo .tile-merged.tile-512 .tile-inner,
.bc-vynumo .tile-merged.tile-1024 .tile-inner,
.bc-vynumo .tile-merged.tile-2048 .tile-inner,
.bc-vynumo .tile-merged.tile-super .tile-inner {
  animation: bc-merge-pop 190ms ease-out, bc-merge-flash 320ms ease-out;
}

.bc-vynumo.bc-shake { animation: bc-shake 260ms ease-in-out; }
@keyframes bc-shake {
  0%, 100% { transform: translateX(0); }
  25%      { transform: translateX(-3px); }
  75%      { transform: translateX(3px); }
}

/* ------------------------------------------------------- Game message -- */

.bc-vynumo .game-message {
  display: none;
  position: absolute;
  inset: 0;
  z-index: 100;
  padding: 18px 14px;
  box-sizing: border-box;
  border-radius: 10px;
  background: var(--overlay-bg);
  backdrop-filter: blur(2px);
  text-align: center;
  color: #F4F4F5;
  animation: bc-fade-in 240ms ease both;
}

@keyframes bc-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.bc-vynumo .game-message.game-won,
.bc-vynumo .game-message.game-over { display: flex; flex-direction: column; justify-content: center; }

.bc-vynumo .game-message.game-won { background: rgba(24, 14, 6, 0.94); }

.bc-vynumo .game-message-title {
  margin: 0;
  font-family: 'Barlow Condensed', 'Inter', sans-serif;
  font-size: clamp(1.5rem, 7vw, 2.1rem);
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: #FFF6F2;
}

.bc-vynumo .game-message.game-won .game-message-title { color: var(--bc-gold-light); }

.bc-vynumo .game-message-score,
.bc-vynumo .game-message-pb,
.bc-vynumo .game-message-tile,
.bc-vynumo .game-message-next {
  margin: 4px 0 0;
  font-size: 0.9rem;
  color: #C9C9CE;
}

.bc-vynumo .game-message-pb.pb-new-best { color: var(--bc-gold-light); font-weight: 700; }

.bc-vynumo .game-message-summary {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
  margin: 12px 0 0;
}

.bc-vynumo .game-summary-item {
  padding: 6px 8px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 5px;
  background: rgba(255, 255, 255, 0.03);
}

.bc-vynumo .game-summary-item span {
  display: block;
  font-size: 0.58rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #9A9AA2;
}

.bc-vynumo .game-summary-item strong {
  font-family: 'Barlow Condensed', 'Inter', sans-serif;
  font-size: 1rem;
  color: #F4F4F5;
}

.bc-vynumo .game-summary-item em { font-size: 0.7rem; color: #9A9AA2; font-style: normal; }

.bc-vynumo .game-message .lower {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
  margin-top: 14px;
}

.bc-vynumo .game-message .lower button,
.bc-vynumo .game-message .lower a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0 18px;
  border: 0;
  border-radius: 6px;
  font-family: 'Barlow Condensed', 'Inter', sans-serif;
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  background: linear-gradient(180deg, var(--bc-crimson-hot), var(--bc-crimson));
  color: #FFF6F2;
  box-shadow: 0 6px 18px rgba(181, 18, 32, 0.32);
}

.bc-vynumo .game-message .lower .keep-playing-button {
  background: rgba(255, 255, 255, 0.08);
  color: #F4F4F5;
  box-shadow: none;
}

.bc-vynumo .game-message-secondary { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }

.bc-vynumo .game-message-secondary button,
.bc-vynumo .game-message-secondary a {
  background: rgba(255, 255, 255, 0.06) !important;
  color: #E6E6EA !important;
  box-shadow: none !important;
  font-size: 0.85rem !important;
}

.bc-vynumo .game-message-secondary .challenge-button[hidden],
.bc-vynumo .game-message-secondary .share-button[hidden] { display: none !important; }

/* --------------------------------------------------- Actions / hint ---- */

.bc-vynumo .game-actions {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin: 14px auto 0;
  width: var(--v-size);
}

.bc-vynumo .restart-button {
  flex: 1 1 auto;
  min-height: 46px;
  padding: 0 20px;
  border: 0;
  border-radius: 6px;
  font-family: 'Barlow Condensed', 'Inter', sans-serif;
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  background: linear-gradient(180deg, var(--bc-crimson-hot), var(--bc-crimson));
  color: #FFF6F2;
  box-shadow: 0 8px 22px rgba(181, 18, 32, 0.32);
}

.bc-vynumo .restart-button:disabled { opacity: 0.6; cursor: default; }

.bc-vynumo .game-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 46px;
  padding: 0 16px;
  border-radius: 6px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.05);
  color: #E6E6EA;
  font-family: 'Barlow Condensed', 'Inter', sans-serif;
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
}

.bc-vynumo .game-hint {
  width: var(--v-size);
  margin: 10px auto 0;
  font-size: 0.8rem;
  text-align: center;
  color: #9A9AA2;
}

/* ------------------------------------------- Settings row (sound/motion) -- */

.bc-vynumo-settings-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: var(--v-size);
  margin: 12px auto 0;
  padding-top: 10px;
  border-top: 1px solid rgba(255, 255, 255, 0.07);
}

.bc-vynumo-settings-note {
  margin: 0;
  font-size: 0.78rem;
  color: #9A9AA2;
}

.bc-vynumo-settings-note strong { color: #E0BD73; }

.bc-vynumo .vynumo-settings { display: flex; gap: 8px; flex-wrap: wrap; }

.bc-vynumo .vynumo-settings__btn {
  min-height: 38px;
  padding: 0 14px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.045);
  color: #E6E6EA;
  font-family: 'Barlow Condensed', 'Inter', sans-serif;
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
}

.bc-vynumo .vynumo-settings__btn[aria-pressed="true"] {
  border-color: rgba(224, 189, 115, 0.5);
  color: #E0BD73;
}

/* Merge particles (merge-fx.js) */
.bc-vynumo .vynumo-particle {
  position: absolute;
  z-index: 3;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  pointer-events: none;
  background: var(--bc-gold-light);
  animation: bc-particle 620ms ease-out forwards;
}

@keyframes bc-particle {
  0%   { opacity: 1; transform: translate(0, 0) scale(1); }
  100% { opacity: 0; transform: translate(var(--dx, 0), var(--dy, -22px)) scale(0.4); }
}

@media (min-width: 720px) {
  .bc-vynumo { --v-gap: 10px; }
}

/* ------------------------------------------------------- Accessibility - */

@media (prefers-reduced-motion: reduce) {
  .bc-vynumo .tile,
  .bc-vynumo .tile .tile-inner,
  .bc-vynumo .tile-merged .tile-inner,
  .bc-vynumo .tile-new .tile-inner,
  .bc-vynumo .best-container.best-beaten,
  .bc-vynumo .score-addition,
  .bc-vynumo.bc-shake,
  .bc-vynumo .vynumo-particle,
  .bc-vynumo .game-message {
    animation: none !important;
    transition: none !important;
  }
}

/* ------------------------------------------------------------------ *
 * /vynumo runs the phone-shaped shell at every width (the page sets
 * html[data-bc-shell="mobile"]): the board owns the middle of the screen, so
 * the nav sits at the bottom instead of down the side. main.css hides
 * .bc-mobile-nav above 767px, so the page that asked for it re-enables it.
 * ------------------------------------------------------------------ */
html[data-bc-shell="mobile"] .bc-mobile-nav {
    display: block !important;
}

/* Keep the last panel clear of the fixed bottom bar. Bootstrap's .py-4 sets
   padding-bottom with !important, so the inline offset the shell applies
   cannot win on its own — this opt-in rule does. */
html[data-bc-shell="mobile"] #bc-main {
    padding-bottom: calc(96px + env(safe-area-inset-bottom, 0px)) !important;
}

/* On a wide screen the row of nav items does not need to hug the phone width. */
@media (min-width: 768px) {
    html[data-bc-shell="mobile"] .bc-mobile-nav-inner {
        max-width: 620px;
    }
}

/* ============================================================================
 * PLAYER HUD + SECONDARY MODULES (gameplay-first layout)
 * ============================================================================
 * The board owns the top of the page. Status is a single low row; Daily,
 * Rankings, Feed and My Stats are a secondary tab bar that stays closed until
 * opened (and only then fetches its data). Mirrors the /pairblitz philosophy.
 * ========================================================================== */

/* ---------------------------------------------------------- Player HUD --- */
.bc-vynumo-playerhud {
  display: flex;
  align-items: center;
  gap: .55rem;
  width: 100%;
  margin: 0 0 .55rem;
  padding: .45rem .6rem;
  background: rgba(20, 20, 24, 0.92);
  border: 1px solid var(--bc-border, #292930);
  border-left: 3px solid var(--bc-crimson, #B51220);
  overflow-x: auto;
  overflow-y: hidden;
  white-space: nowrap;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.bc-vynumo-playerhud::-webkit-scrollbar { display: none; }

.bc-vynumo-playerhud__player {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  flex: 0 0 auto;
  font-family: 'Barlow Condensed', 'Inter', sans-serif;
  font-size: 1rem;
  letter-spacing: .03em;
  text-transform: uppercase;
  color: #F2F2F2;
}
.bc-vynumo-playerhud__player b { color: #E0BD73; font-weight: 700; }
.bc-vynumo-playerhud__player i { color: #C99A38; }

.bc-vynumo-playerhud__stat {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  flex: 0 0 auto;
  padding: .2rem .5rem;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.04);
  font-family: 'Barlow Condensed', 'Inter', sans-serif;
  font-size: .8rem;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: #A3A3A3;
}
.bc-vynumo-playerhud__stat b { color: #F4F4F5; font-weight: 700; }
.bc-vynumo-playerhud__stat i { color: #C99A38; }
.bc-vynumo-playerhud__stat.is-muted b { color: #71717A; }

/* Rewarded runs are the one stat that affects a payout — give it weight. */
.bc-vynumo-playerhud__reward {
  border-color: rgba(224, 189, 115, 0.4);
  background: rgba(201, 154, 56, 0.1);
}
.bc-vynumo-playerhud__reward b { color: #E0BD73; }

.bc-vynumo-hud-note {
  margin: 0 0 .55rem;
  font-size: .8rem;
  color: #A3A3A3;
}
.bc-vynumo-hud-note[hidden] { display: none; }
.bc-vynumo-hud-note a { color: #E0BD73; }

/* ---------------------------------------------------- secondary toolbar --- */
.bc-vynumo-toolbar {
  position: sticky;
  top: 0;
  z-index: 5;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: .25rem;
  margin: 0 0 .75rem;
  padding: .3rem;
  background: rgba(11, 12, 16, 0.94);
  backdrop-filter: blur(6px);
  border: 1px solid var(--bc-border, #292930);
}

.bc-vynumo-tab {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  min-height: 44px;
  padding: .35rem .2rem;
  background: transparent;
  border: 1px solid transparent;
  color: #A3A3A3;
  font-family: 'Barlow Condensed', sans-serif;
  font-size: .74rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  cursor: pointer;
}
.bc-vynumo-tab i { font-size: 1rem; }
.bc-vynumo-tab.is-active {
  color: #E0BD73;
  border-color: rgba(212, 168, 83, .4);
  background: rgba(212, 168, 83, .08);
}
.bc-vynumo-tab:focus-visible { outline: 2px solid #E0BD73; outline-offset: 2px; }

/* Panels reveal with a light, GPU-friendly slide/fade. */
.bc-vynumo-panel:not([hidden]) { animation: bcVynPanelIn .18s ease-out; }
@keyframes bcVynPanelIn {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  .bc-vynumo-panel:not([hidden]) { animation: none; }
}

/* My Stats list */
.bc-vynumo-stats { list-style: none; margin: 0; padding: 0; }
.bc-vynumo-stats li {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: .75rem;
  padding: .5rem .1rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.bc-vynumo-stats li:last-child { border-bottom: 0; }
.bc-vynumo-stats li span {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: .78rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #A3A3A3;
}
.bc-vynumo-stats li strong { color: #F4F4F5; font-variant-numeric: tabular-nums; }

/* Desktop: keep the single readable column, one HUD row, no stat wall. */
@media (min-width: 992px) {
  .bc-vynumo-playerhud,
  .bc-vynumo-toolbar,
  .bc-vynumo-panels { width: 100%; max-width: 980px; margin-left: auto; margin-right: auto; }
  .bc-vynumo-playerhud { justify-content: center; }
}