/* ========== House games: Dice, Limbo, Keno, Mines, Blackjack ==========
   One layout for all of them: a 300px control panel on the left, the game stage on the right. Each game has its
   own accent colour; everything else follows the site theme (style.css). JS: house.js, dice.js, limbo.js, keno.js, mines.js, blackjack.js */
body[data-view="dice"] { --accent: #a77bff; --accent-2: #7b4dff; --accent-ink: #12082b; }
body[data-view="limbo"] { --accent: #4fd1ff; --accent-2: #1c9bd6; --accent-ink: #031a26; }
body[data-view="keno"] { --accent: #ff8f5a; --accent-2: #f2652c; --accent-ink: #2b0f03; }
body[data-view="mines"] { --accent: #36e39a; --accent-2: #14b874; --accent-ink: #04261a; }
body[data-view="blackjack"] { --accent: #ffc940; --accent-2: #ff9d1c; --accent-ink: #1a1206; }

.hg { max-width: 1280px; margin: 0 auto; padding: 22px 28px; }
.hg-wrap { padding: 0; display: grid; grid-template-columns: 300px minmax(0, 1fr); overflow: hidden; min-height: 620px; }

/* ---------- left panel ---------- */
.hg-side { display: flex; flex-direction: column; gap: 14px; padding: 18px; background: var(--bg2); border-right: 1px solid var(--line); }
.hg-mode { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 4px; border-radius: 12px; background: var(--bg); border: 1px solid var(--line); }
.hg-mode button { padding: 9px 0; border-radius: 9px; font-weight: 700; font-size: 14px; color: var(--muted); transition: background .15s, color .15s; }
.hg-mode button:hover { color: var(--text); }
.hg-mode button.on { background: var(--card); color: var(--text); box-shadow: 0 2px 8px rgba(0, 0, 0, .35), inset 0 1px 0 rgba(255, 255, 255, .06); }
.hg-field { display: flex; flex-direction: column; gap: 7px; }
.hg-label { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; font-size: 12px; font-weight: 700; color: var(--muted); }
.hg-label .mono { font-weight: 500; color: #6d768b; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* the bet amount box: coin, input, ½ 2× Max */
.hg-amount, .hg-input, .hg-readout { display: flex; align-items: center; gap: 4px; min-height: 46px; padding: 0 5px 0 11px; border-radius: 11px;
  background: var(--bg); border: 1px solid var(--line); transition: border-color .15s, box-shadow .15s; }
.hg-amount:focus-within, .hg-input:focus-within { border-color: color-mix(in srgb, var(--accent) 70%, transparent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 14%, transparent); }
.hg-amount input, .hg-input input { flex: 1; min-width: 0; padding: 11px 4px; border: 0; outline: none; background: none; font-family: 'JetBrains Mono', monospace; font-size: 15px; font-weight: 700; }
.hg-amount input:disabled, .hg-input input:disabled { color: var(--muted); cursor: not-allowed; }
.hg-amount button { flex: none; min-width: 38px; height: 34px; padding: 0 8px; border-radius: 8px; font-size: 13px; font-weight: 700; color: #c9d0de;
  background: linear-gradient(180deg, rgba(255, 255, 255, .07), rgba(255, 255, 255, .02)), var(--bg2); border: 1px solid rgba(255, 255, 255, .08);
  box-shadow: 0 2px 0 rgba(0, 0, 0, .45); transition: transform .08s, color .15s, border-color .15s; }
.hg-amount button:hover:not(:disabled) { color: var(--text); border-color: color-mix(in srgb, var(--accent) 50%, transparent); }
.hg-amount button:active:not(:disabled) { transform: translateY(2px); box-shadow: none; }
.hg-amount button:disabled { opacity: .45; cursor: not-allowed; }
.hg-amount.plain { padding-right: 11px; }
.hg-input { padding-right: 12px; }
.hg-input i { font-style: normal; color: var(--muted); font-weight: 700; }
.hg-input.sm { min-height: 36px; padding: 0 9px; border-radius: 9px; }
.hg-input.sm input { padding: 7px 2px; font-size: 13px; }
.hg-readout { padding-right: 12px; font-weight: 700; color: var(--text); cursor: default; }
.hg-readout #dcProfit { overflow: hidden; text-overflow: ellipsis; }
.hg-hint { font-size: 12px; color: var(--muted); }

/* the big button: accent for bet, green for cash out, red for stop */
.hg-go { width: 100%; padding: 15px; border-radius: 12px; font-size: 16px; font-weight: 800; letter-spacing: .01em; color: var(--accent-ink);
  background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 80%, #fff), var(--accent) 45%, var(--accent-2));
  box-shadow: 0 10px 26px -12px var(--accent), inset 0 1px 0 rgba(255, 255, 255, .35), 0 3px 0 color-mix(in srgb, var(--accent-2) 60%, #000);
  transition: transform .08s, filter .15s, box-shadow .15s; display: flex; align-items: center; justify-content: center; gap: 7px; }
.hg-go:hover:not(:disabled) { filter: brightness(1.07); }
.hg-go:active:not(:disabled) { transform: translateY(2px); box-shadow: 0 6px 18px -12px var(--accent), inset 0 1px 0 rgba(255, 255, 255, .3); }
.hg-go:disabled { filter: grayscale(.7) brightness(.62); cursor: not-allowed; }
.hg-go.cash { color: #04261a; background: linear-gradient(180deg, #8ff5c8, #36e39a 45%, #14b874); box-shadow: 0 10px 26px -10px #36e39a, inset 0 1px 0 rgba(255, 255, 255, .4), 0 3px 0 #0b7a4c;
  animation: hgCashGlow 1.6s ease-in-out infinite; }
@keyframes hgCashGlow { 50% { box-shadow: 0 10px 34px -6px #36e39a, inset 0 1px 0 rgba(255, 255, 255, .4), 0 3px 0 #0b7a4c; } }
.hg-go.stop { color: #fff; background: linear-gradient(180deg, #ff8a95, #ff5d6c 45%, #d63848); box-shadow: 0 10px 26px -12px #ff5d6c, inset 0 1px 0 rgba(255, 255, 255, .3), 0 3px 0 #8f1f2b; }
.hg-sub { width: 100%; padding: 11px; border-radius: 11px; font-weight: 700; font-size: 14px; color: var(--text);
  background: var(--bg); border: 1px solid var(--line); transition: border-color .15s, background .15s, transform .08s; }
.hg-sub:hover:not(:disabled) { border-color: color-mix(in srgb, var(--accent) 55%, transparent); background: color-mix(in srgb, var(--accent) 7%, var(--bg)); }
.hg-sub:active:not(:disabled) { transform: translateY(1px); }
.hg-sub:disabled { opacity: .45; cursor: not-allowed; }

/* autobet settings */
.hg-autobox { display: flex; flex-direction: column; gap: 12px; padding-top: 2px; }
.hg-autobox:not([hidden]) { animation: hgSlide .2s ease-out; }
@keyframes hgSlide { from { opacity: 0; transform: translateY(-4px); } }
.hg-onx { display: grid; grid-template-columns: auto auto minmax(0, 1fr); gap: 4px; padding: 4px; border-radius: 11px; background: var(--bg); border: 1px solid var(--line); }
.hg-onx > button { padding: 0 10px; border-radius: 8px; font-size: 12px; font-weight: 700; color: var(--muted); white-space: nowrap; }
.hg-onx > button:hover { color: var(--text); }
.hg-onx > button.on { background: var(--card); color: var(--text); box-shadow: 0 2px 6px rgba(0, 0, 0, .3); }
.hg-onx .hg-input.sm { border-color: transparent; background: var(--bg2); }
.hg-autostat { display: flex; justify-content: space-between; align-items: center; padding: 10px 12px; border-radius: 10px; font-size: 12px;
  background: var(--bg); border: 1px dashed var(--line); color: var(--muted); }
.hg-autostat b.up { color: var(--green); }
.hg-autostat b.down { color: var(--red); }

/* ---------- right stage ---------- */
.hg-stage { position: relative; display: flex; flex-direction: column; gap: 16px; padding: 18px; min-width: 0;
  background: radial-gradient(ellipse 70% 55% at 50% 0%, color-mix(in srgb, var(--accent) 8%, transparent), transparent 70%); }
.hg-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 32px; }
.hg-recent { display: flex; gap: 6px; overflow: hidden; min-width: 0; }
.hg-chip { flex: none; padding: 6px 10px; border-radius: 8px; font: 700 12px 'JetBrains Mono', monospace; color: var(--muted);
  background: var(--bg2); border: 1px solid var(--line); }
.hg-chip.win { color: #04261a; background: linear-gradient(180deg, #6ff0b7, #2fcf86); border-color: transparent; }
.hg-chip.new { animation: hgChipIn .35s cubic-bezier(.2, 1.5, .4, 1); }
@keyframes hgChipIn { from { transform: translateX(-12px) scale(.6); opacity: 0; } }
.hg-fair { flex: none; margin-left: auto; display: inline-flex; align-items: center; gap: 6px; padding: 7px 11px; border-radius: 9px; font-size: 13px; font-weight: 700; color: var(--muted);
  background: var(--bg2); border: 1px solid var(--line); transition: color .15s, border-color .15s; }
.hg-fair:hover { color: var(--text); border-color: #39425a; }
.hg-fair svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* result card that pops up over the game */
.hg-pop { position: absolute; left: 50%; top: 50%; z-index: 6; display: flex; flex-direction: column; align-items: center; gap: 4px; min-width: 150px;
  padding: 16px 26px; border-radius: 16px; background: rgba(13, 16, 23, .94); border: 2px solid var(--green); pointer-events: none;
  box-shadow: 0 0 0 6px rgba(54, 227, 154, .08), 0 20px 60px -10px rgba(0, 0, 0, .8), 0 0 50px -12px var(--green);
  transform: translate(-50%, -50%); animation: hgPopIn .5s cubic-bezier(.2, 1.6, .4, 1) both; }
.hg-pop b { font-size: 34px; font-weight: 800; line-height: 1.05; color: var(--green); text-shadow: 0 0 22px rgba(54, 227, 154, .5); }
.hg-pop > span { display: flex; align-items: center; gap: 6px; font-weight: 700; font-size: 15px; color: var(--text); }
.hg-pop.lose { border-color: #4a5470; box-shadow: 0 20px 60px -10px rgba(0, 0, 0, .8); }
.hg-pop.lose b { color: var(--text); text-shadow: none; }
@keyframes hgPopIn { from { transform: translate(-50%, -50%) scale(.4); opacity: 0; } 60% { opacity: 1; } }

/* ========== Dice ========== */
.dc-stage { justify-content: flex-start; }
.dc-board { flex: 1; display: flex; flex-direction: column; justify-content: center; gap: 30px; width: 100%; max-width: 860px; margin: 0 auto; padding: 10px 0 20px; }
.dc-result { text-align: center; font-size: clamp(54px, 8vw, 92px); font-weight: 800; line-height: 1; letter-spacing: -.02em; color: var(--text);
  font-variant-numeric: tabular-nums; transition: color .2s, text-shadow .2s; }
.dc-board.win .dc-result { color: var(--green); text-shadow: 0 0 40px rgba(54, 227, 154, .45); }
.dc-board.lose .dc-result { color: var(--red); text-shadow: 0 0 40px rgba(255, 93, 108, .35); }
.dc-result.pop { animation: dcPop .45s cubic-bezier(.2, 1.7, .4, 1); }
@keyframes dcPop { 0% { transform: scale(.86); } 100% { transform: none; } }

/* the 0-100 track. --t is the line, --r (on the marker) is where the roll landed. The rail sits 24px in from each side. */
.dc-track { --pad: 26px; position: relative; padding: 86px var(--pad) 44px; border-radius: 18px; background: var(--bg); border: 1px solid var(--line);
  box-shadow: inset 0 2px 12px rgba(0, 0, 0, .35); }
.dc-rail { position: relative; height: 14px; border-radius: 7px; overflow: hidden; background: var(--bg2);
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, .6); }
.dc-lose, .dc-win { position: absolute; top: 0; bottom: 0; transition: left .12s, width .12s, right .12s, filter .3s; }
.dc-lose { left: 0; width: var(--t); background: linear-gradient(180deg, #ff7d89, #e2424f); }
.dc-win { left: var(--t); right: 0; background: linear-gradient(180deg, #6ff0b7, #20b773); }
.dc-track.under .dc-win { left: 0; right: auto; width: var(--t); }
.dc-track.under .dc-lose { left: var(--t); right: 0; width: auto; }
.dc-board.win .dc-win { filter: brightness(1.2) drop-shadow(0 0 8px rgba(54, 227, 154, .8)); }
.dc-board.lose .dc-lose { filter: brightness(1.15); }
.dc-scale { position: absolute; left: var(--pad); right: var(--pad); bottom: 14px; display: flex; justify-content: space-between; font-size: 12px; color: var(--muted); }
.dc-scale span { width: 0; display: flex; justify-content: center; }
/* the range input lies on top of the rail; it is wider by half a handle each side so the handle centre matches --t */
#dcSlider { position: absolute; left: calc(var(--pad) - 17px); right: calc(var(--pad) - 17px); width: calc(100% - 2 * var(--pad) + 34px); top: 75px; height: 36px; margin: 0;
  -webkit-appearance: none; appearance: none; background: none; cursor: pointer; z-index: 2; }
#dcSlider:disabled { cursor: not-allowed; }
#dcSlider::-webkit-slider-runnable-track { height: 36px; background: none; }
#dcSlider::-moz-range-track { height: 36px; background: none; }
#dcSlider::-webkit-slider-thumb { -webkit-appearance: none; width: 34px; height: 34px; margin-top: 1px; border-radius: 10px; cursor: grab;
  background: repeating-linear-gradient(90deg, transparent 0 11px, rgba(0, 0, 0, .28) 11px 13px, transparent 13px 15px, rgba(0, 0, 0, .28) 15px 17px, transparent 17px 19px, rgba(0, 0, 0, .28) 19px 21px, transparent 21px),
    linear-gradient(180deg, color-mix(in srgb, var(--accent) 70%, #fff), var(--accent-2));
  box-shadow: 0 4px 14px -2px color-mix(in srgb, var(--accent) 70%, transparent), 0 3px 0 color-mix(in srgb, var(--accent-2) 55%, #000), inset 0 1px 0 rgba(255, 255, 255, .4);
  transition: transform .1s; }
#dcSlider::-moz-range-thumb { width: 34px; height: 34px; border: 0; border-radius: 10px; cursor: grab;
  background: repeating-linear-gradient(90deg, transparent 0 11px, rgba(0, 0, 0, .28) 11px 13px, transparent 13px 15px, rgba(0, 0, 0, .28) 15px 17px, transparent 17px 19px, rgba(0, 0, 0, .28) 19px 21px, transparent 21px),
    linear-gradient(180deg, color-mix(in srgb, var(--accent) 70%, #fff), var(--accent-2));
  box-shadow: 0 4px 14px -2px color-mix(in srgb, var(--accent) 70%, transparent), 0 3px 0 color-mix(in srgb, var(--accent-2) 55%, #000); }
#dcSlider:active::-webkit-slider-thumb { cursor: grabbing; transform: scale(1.08); }
#dcSlider:focus-visible { outline: none; }
#dcSlider:focus-visible::-webkit-slider-thumb { outline: 2px solid #fff; outline-offset: 2px; }
/* the die that slides to the roll */
.dc-marker { position: absolute; top: 8px; left: calc(var(--pad) + (100% - 2 * var(--pad)) * var(--r, .5)); z-index: 3; display: flex; flex-direction: column; align-items: center; gap: 3px;
  transform: translateX(-50%); pointer-events: none; transition: left .42s cubic-bezier(.2, .9, .25, 1); animation: dcMarkIn .3s ease-out; }
@keyframes dcMarkIn { from { opacity: 0; transform: translate(-50%, 8px); } }
.dc-marker svg { width: 42px; height: 42px; filter: drop-shadow(0 6px 10px rgba(0, 0, 0, .55)); transition: transform .3s; }
.dc-marker svg rect { fill: #e9ecf3; transition: fill .2s; }
.dc-marker svg circle { fill: #1b1f2a; }
.dc-marker b { order: -1; padding: 3px 8px; border-radius: 7px; font-size: 13px; font-weight: 800; background: var(--card); border: 1px solid var(--line); white-space: nowrap; transition: background .2s, color .2s; }
.dc-marker::after { content: ''; width: 0; height: 0; border: 6px solid transparent; border-top-color: #e9ecf3; margin-top: -3px; transition: border-color .2s; }
.dc-marker.win svg rect { fill: #36e39a; } .dc-marker.win::after { border-top-color: #36e39a; }
.dc-marker.win b { background: #36e39a; color: #04261a; border-color: transparent; }
.dc-marker.lose svg rect { fill: #ff5d6c; } .dc-marker.lose::after { border-top-color: #ff5d6c; }
.dc-marker.lose b { background: #ff5d6c; color: #fff; border-color: transparent; }
.dc-marker.win svg, .dc-marker.lose svg { animation: dcLand .45s cubic-bezier(.2, 1.6, .4, 1); }
@keyframes dcLand { 0% { transform: rotate(-30deg) scale(.8); } 100% { transform: none; } }
/* multiplier / target / chance */
.dc-inputs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; padding: 14px; border-radius: 16px; background: var(--bg2); border: 1px solid var(--line); }
.dc-in { display: flex; flex-direction: column; gap: 7px; min-width: 0; }
.dc-in > span { font-size: 12px; font-weight: 700; color: var(--muted); }
.dc-box { display: flex; align-items: center; min-height: 46px; padding: 0 12px; border-radius: 11px; background: var(--bg); border: 1px solid var(--line); transition: border-color .15s, box-shadow .15s; }
.dc-box:focus-within { border-color: color-mix(in srgb, var(--accent) 70%, transparent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 14%, transparent); }
.dc-box input { flex: 1; min-width: 0; padding: 11px 0; border: 0; outline: none; background: none; font-size: 15px; font-weight: 700; }
.dc-box input:disabled { color: var(--muted); }
.dc-box i { font-style: normal; color: var(--muted); font-weight: 700; }
.dc-flipbox { padding-right: 5px; }
#dcFlip { flex: none; width: 36px; height: 36px; border-radius: 9px; display: grid; place-items: center; color: var(--accent);
  background: color-mix(in srgb, var(--accent) 12%, var(--bg2)); border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent); transition: transform .3s, background .15s; }
#dcFlip:hover:not(:disabled) { transform: rotate(180deg); background: color-mix(in srgb, var(--accent) 20%, var(--bg2)); }
#dcFlip:disabled { opacity: .45; cursor: not-allowed; }
#dcFlip svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }

/* ========== Limbo ========== */
.lm-board { position: relative; flex: 1; min-height: 340px; display: grid; place-items: center; overflow: hidden; border-radius: 18px;
  background: radial-gradient(ellipse 60% 50% at 50% 100%, color-mix(in srgb, var(--accent) 16%, transparent), transparent 70%), var(--bg);
  border: 1px solid var(--line); box-shadow: inset 0 2px 12px rgba(0, 0, 0, .35); }
/* stars drift down while the number climbs, as if it is flying up */
.lm-board::before { content: ''; position: absolute; inset: -100% 0 0; opacity: .5; pointer-events: none;
  background: radial-gradient(1.5px 1.5px at 20% 30%, #fff, transparent), radial-gradient(1px 1px at 70% 10%, #fff, transparent), radial-gradient(1.5px 1.5px at 45% 70%, #cfe9ff, transparent),
    radial-gradient(1px 1px at 85% 55%, #fff, transparent), radial-gradient(1px 1px at 10% 85%, #cfe9ff, transparent), radial-gradient(1.5px 1.5px at 60% 45%, #fff, transparent);
  background-size: 260px 180px; }
.lm-board.rolling::before { animation: lmStars .5s linear infinite; opacity: .9; }
@keyframes lmStars { to { transform: translateY(180px); } }
/* rings that pulse out from the number */
.lm-sky { position: absolute; inset: 0; display: grid; place-items: center; pointer-events: none; }
.lm-sky i { grid-area: 1 / 1; width: 220px; aspect-ratio: 1; border-radius: 50%; border: 2px solid color-mix(in srgb, var(--accent) 35%, transparent); opacity: 0; }
.lm-board.rolling .lm-sky i { animation: lmRing 1s ease-out infinite; }
.lm-board.rolling .lm-sky i:nth-child(2) { animation-delay: .33s; }
.lm-board.rolling .lm-sky i:nth-child(3) { animation-delay: .66s; }
@keyframes lmRing { from { transform: scale(.5); opacity: .8; } to { transform: scale(2.4); opacity: 0; } }
.lm-board.win .lm-sky i { border-color: rgba(54, 227, 154, .5); animation: lmRing .9s ease-out 1 both; }
.lm-center { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 14px; }
.lm-result { font-size: clamp(64px, 10vw, 124px); font-weight: 800; line-height: 1; letter-spacing: -.02em; font-variant-numeric: tabular-nums; color: var(--text);
  text-shadow: 0 0 40px color-mix(in srgb, var(--accent) 30%, transparent); transition: color .2s, text-shadow .2s; }
.lm-board.rolling .lm-result { color: color-mix(in srgb, var(--accent) 35%, #fff); }
.lm-board.win .lm-result { color: var(--green); text-shadow: 0 0 46px rgba(54, 227, 154, .55); }
.lm-board.lose .lm-result { color: var(--red); text-shadow: 0 0 46px rgba(255, 93, 108, .4); }
.lm-result.pop { animation: dcPop .45s cubic-bezier(.2, 1.7, .4, 1); }
.lm-need { padding: 6px 14px; border-radius: 999px; font-size: 13px; font-weight: 700; color: var(--muted); background: var(--bg2); border: 1px solid var(--line); transition: color .2s, border-color .2s; }
.lm-board.win .lm-need { color: var(--green); border-color: rgba(54, 227, 154, .4); }
.lm-inputs { grid-template-columns: repeat(2, minmax(0, 1fr)); }

/* ========== Keno ========== */
/* (.mn-presets is styled further down, so these need the extra class to win) */
.mn-presets.kn-risk { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.mn-presets.kn-risk button { font-family: inherit; font-size: 13px; }
.kn-tools { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.kn-info { font-size: 12px; text-align: center; }
.kn-board-wrap { position: relative; flex: 1; display: grid; place-items: center; padding: 4px 0; }
.kn-board { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 9px; width: min(660px, 100%); }
.kn-tile { position: relative; aspect-ratio: 1; border-radius: 12px; font: 800 17px 'JetBrains Mono', monospace; color: #c3cadb;
  background: linear-gradient(180deg, #2c3346, #212737); box-shadow: 0 4px 0 #141822, inset 0 1px 0 rgba(255, 255, 255, .09);
  transition: transform .12s, background .15s, box-shadow .15s, color .15s; -webkit-tap-highlight-color: transparent; }
.kn-board:not(.busy) .kn-tile:hover { transform: translateY(-2px); background: linear-gradient(180deg, #353e55, #282f42); box-shadow: 0 6px 0 #141822, 0 10px 22px -10px var(--accent); color: #fff; }
.kn-board:not(.busy) .kn-tile:active { transform: translateY(2px); box-shadow: 0 1px 0 #141822; }
.kn-board.busy .kn-tile { cursor: default; }
.kn-tile:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
/* your picks */
.kn-tile.pick { color: var(--accent-ink); background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 75%, #fff), var(--accent) 50%, var(--accent-2));
  box-shadow: 0 4px 0 color-mix(in srgb, var(--accent-2) 55%, #000), 0 0 18px -6px var(--accent), inset 0 1px 0 rgba(255, 255, 255, .35); }
.kn-board:not(.busy) .kn-tile.pick:hover { color: var(--accent-ink); background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 60%, #fff), var(--accent) 50%, var(--accent-2)); }
.kn-tile.pick.in { animation: knIn .3s cubic-bezier(.2, 1.6, .4, 1); }
@keyframes knIn { from { transform: scale(.82); } }
/* drawn numbers: a hit is green with a gem shine, a drawn number you didn't pick goes dark with a red number */
.kn-tile.drawn { color: #ff6b79; background: #10141c; box-shadow: inset 0 0 0 1px rgba(255, 93, 108, .25), inset 0 3px 10px rgba(0, 0, 0, .5); animation: knDraw .35s cubic-bezier(.2, 1.5, .4, 1); }
.kn-tile.hit { color: #04261a; background: radial-gradient(circle at 35% 25%, rgba(255, 255, 255, .55), transparent 40%), linear-gradient(180deg, #8ff5c8, #36e39a 50%, #14b874);
  box-shadow: 0 4px 0 #0b7a4c, 0 0 26px -4px #36e39a, inset 0 1px 0 rgba(255, 255, 255, .5); animation: knHit .5s cubic-bezier(.2, 1.7, .4, 1); }
@keyframes knDraw { 0% { transform: scale(.7); opacity: .4; } }
@keyframes knHit { 0% { transform: scale(.6) rotate(-8deg); } 60% { transform: scale(1.12); } }
.kn-tile.hit::after { content: ''; position: absolute; inset: -4px; border-radius: 15px; border: 2px solid #36e39a; opacity: 0; animation: knRing .6s ease-out; pointer-events: none; }
@keyframes knRing { from { opacity: 1; transform: scale(.85); } to { opacity: 0; transform: scale(1.25); } }
/* pay table under the board: one chip per number of hits */
.kn-pay { display: flex; gap: 6px; width: min(660px, 100%); margin: 0 auto; }
.kn-pay:empty { display: none; }
.kn-pay > div { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 8px 2px; border-radius: 10px;
  background: var(--bg2); border: 1px solid var(--line); transition: background .2s, border-color .2s, transform .2s; }
.kn-pay b { font: 700 12px 'JetBrains Mono', monospace; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.kn-pay span { font-size: 11px; color: var(--muted); }
.kn-pay > div.zero b { color: var(--muted); }
.kn-pay > div.on { border-color: #36e39a; background: color-mix(in srgb, #36e39a 14%, var(--bg2)); transform: translateY(-2px); }
.kn-pay > div.on b { color: #36e39a; }
.kn-pay.hint { justify-content: center; padding: 12px; border-radius: 10px; background: var(--bg2); border: 1px dashed var(--line); color: var(--muted); font-size: 13px; }

/* ========== Mines ========== */
.mn-count { display: flex; gap: 6px; }
.mn-presets { flex: 1; display: grid; grid-template-columns: repeat(5, 1fr); gap: 4px; padding: 4px; border-radius: 11px; background: var(--bg); border: 1px solid var(--line); }
.mn-presets button { padding: 8px 0; border-radius: 8px; font: 700 13px 'JetBrains Mono', monospace; color: var(--muted); transition: background .15s, color .15s; }
.mn-presets button:hover:not(:disabled) { color: var(--text); }
.mn-presets button.on { color: var(--accent-ink); background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 75%, #fff), var(--accent)); box-shadow: 0 2px 8px -2px var(--accent); }
.mn-presets button:disabled { cursor: not-allowed; }
.mn-presets button:disabled:not(.on) { opacity: .45; }
#mnMines { width: 54px; flex: none; text-align: center; border-radius: 11px; border: 1px solid var(--line); background: var(--bg); outline: none; font-weight: 700; font-size: 14px; }
#mnMines:focus { border-color: var(--accent); }
#mnMines:disabled { color: var(--muted); cursor: not-allowed; }
.mn-stats { display: flex; flex-direction: column; gap: 9px; padding: 14px; border-radius: 13px; background: var(--bg); border: 1px solid var(--line); transition: border-color .3s, box-shadow .3s; }
.mn-stats.is-live { border-color: color-mix(in srgb, var(--accent) 40%, transparent); box-shadow: 0 0 30px -14px var(--accent); }
.mn-stats > div:not(.mn-progress):not(.mn-found) { display: flex; justify-content: space-between; align-items: center; gap: 8px; font-size: 13px; }
.mn-stats span:first-child { color: var(--muted); }
.mn-stats b { display: flex; align-items: center; gap: 5px; font-size: 14px; white-space: nowrap; }
#mnMult { color: var(--accent); }
.mn-stats.is-live #mnProfit { color: var(--green); }
#mnNext .coin { width: 14px; height: 14px; }
.mn-progress { height: 7px; border-radius: 4px; background: var(--bg2); overflow: hidden; margin-top: 2px; }
.mn-progress i { display: block; height: 100%; width: 0; border-radius: 4px; background: linear-gradient(90deg, var(--accent-2), var(--accent)); box-shadow: 0 0 10px var(--accent); transition: width .4s cubic-bezier(.2, .9, .3, 1); }
.mn-found { font-size: 12px; text-align: center; }

/* multiplier ladder above the board */
.mn-ladder { display: flex; gap: 6px; overflow: hidden; min-width: 0; }
.mn-step { flex: none; padding: 6px 10px; border-radius: 8px; font: 700 12px 'JetBrains Mono', monospace; color: var(--muted); background: var(--bg2); border: 1px solid var(--line);
  transition: background .25s, color .25s, border-color .25s; }
.mn-step.done { color: var(--accent); background: color-mix(in srgb, var(--accent) 10%, var(--bg2)); border-color: color-mix(in srgb, var(--accent) 25%, transparent); }
.mn-step.next { color: var(--accent-ink); background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 75%, #fff), var(--accent)); border-color: transparent;
  box-shadow: 0 0 16px -4px var(--accent); animation: mnNextPulse 1.4s ease-in-out infinite; }
@keyframes mnNextPulse { 50% { box-shadow: 0 0 24px -2px var(--accent); } }

/* the board */
.mn-board-wrap { position: relative; flex: 1; display: grid; place-items: center; padding: 8px 0 14px; }
.mn-board { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 11px; width: min(570px, 100%); }
.mn-board.shake { animation: mnShake .5s cubic-bezier(.36, .07, .19, .97); }
@keyframes mnShake { 10%, 90% { transform: translate(-1px, 1px); } 20%, 80% { transform: translate(3px, -2px); } 30%, 50%, 70% { transform: translate(-5px, 2px) rotate(-.4deg); } 40%, 60% { transform: translate(5px, -1px) rotate(.4deg); } }
.mn-tile { position: relative; aspect-ratio: 1; padding: 0; perspective: 700px; border-radius: 13px; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.mn-in { position: absolute; inset: 0; transform-style: preserve-3d; transition: transform .5s cubic-bezier(.3, 1.35, .5, 1) var(--d, 0ms); }
.mn-front, .mn-back { position: absolute; inset: 0; display: grid; place-items: center; border-radius: 13px; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.mn-front { background: linear-gradient(180deg, #2c3346, #212737); box-shadow: 0 5px 0 #141822, inset 0 1px 0 rgba(255, 255, 255, .09), inset 0 -2px 0 rgba(0, 0, 0, .2);
  color: rgba(255, 255, 255, .055); transition: transform .15s, background .15s, box-shadow .15s, color .15s; }
.mn-mark { width: 42%; height: 42%; transition: transform .2s; }
.mn-back { transform: rotateY(180deg); background: #10141c; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .04), inset 0 3px 10px rgba(0, 0, 0, .5); }
.mn-board.is-live .mn-tile:not(.open):hover .mn-front, .mn-board.picking .mn-tile:not(.open):hover .mn-front {
  transform: translateY(-3px); background: linear-gradient(180deg, #353e55, #282f42); box-shadow: 0 8px 0 #141822, 0 12px 24px -10px var(--accent), inset 0 1px 0 rgba(255, 255, 255, .12);
  color: color-mix(in srgb, var(--accent) 45%, transparent); }
.mn-board.is-live .mn-tile:not(.open):active .mn-front { transform: translateY(2px); box-shadow: 0 2px 0 #141822; }
.mn-board:not(.is-live):not(.picking) .mn-tile:not(.open) { cursor: default; }
.mn-tile:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.mn-tile.pending .mn-front { animation: mnPending .5s ease-in-out infinite alternate; }
@keyframes mnPending { to { transform: translateY(-2px) scale(.96); color: color-mix(in srgb, var(--accent) 60%, transparent); } }
/* autobet: chosen tiles */
.mn-tile.picked:not(.open) .mn-front { background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 40%, #2c3346), color-mix(in srgb, var(--accent) 22%, #212737));
  box-shadow: 0 5px 0 color-mix(in srgb, var(--accent) 35%, #10141c), 0 0 0 2px var(--accent), 0 0 22px -6px var(--accent); color: rgba(255, 255, 255, .7); }
.mn-tile.picked:not(.open) .mn-mark { transform: scale(1.1); }
/* turned over */
.mn-tile.open { cursor: default; }
.mn-tile.open .mn-in { transform: rotateY(180deg); }
.mn-tile.gem .mn-back { background: radial-gradient(circle at 50% 45%, rgba(54, 227, 154, .32), rgba(54, 227, 154, .06) 58%, transparent 72%), #0f1a17;
  box-shadow: inset 0 0 0 1px rgba(54, 227, 154, .35), inset 0 0 24px rgba(54, 227, 154, .18), 0 0 26px -8px rgba(54, 227, 154, .7); }
.mn-gem { width: 62%; height: 62%; filter: drop-shadow(0 0 10px rgba(54, 227, 154, .7)); animation: mnGemIn .6s cubic-bezier(.2, 1.7, .4, 1) calc(var(--d, 0ms) + 130ms) both; }
@keyframes mnGemIn { 0% { transform: scale(.2) rotate(-25deg); opacity: 0; } 100% { transform: none; opacity: 1; } }
.mn-tile.gem:not(.dim) .mn-gem { animation: mnGemIn .6s cubic-bezier(.2, 1.7, .4, 1) .13s both, mnGemShine 2.6s ease-in-out .8s infinite; }
@keyframes mnGemShine { 0%, 100% { filter: drop-shadow(0 0 8px rgba(54, 227, 154, .6)); } 50% { filter: drop-shadow(0 0 16px rgba(120, 255, 200, .95)) brightness(1.15); } }
.mn-tile.bomb .mn-back { background: radial-gradient(circle at 50% 50%, rgba(255, 93, 108, .22), transparent 70%), #1a1013; box-shadow: inset 0 0 0 1px rgba(255, 93, 108, .3); }
.mn-bomb { width: 64%; height: 64%; filter: drop-shadow(0 4px 6px rgba(0, 0, 0, .6)); animation: mnGemIn .5s cubic-bezier(.2, 1.6, .4, 1) calc(var(--d, 0ms) + 130ms) both; }
.mn-fuse { animation: mnFuse .18s steps(2) infinite; transform-origin: 55px 9px; }
@keyframes mnFuse { 50% { transform: scale(.7); opacity: .7; } }
.mn-tile.hit .mn-back { background: radial-gradient(circle at 50% 50%, rgba(255, 140, 60, .7), rgba(255, 60, 80, .4) 45%, rgba(120, 10, 30, .5) 80%), #2a0d12;
  box-shadow: inset 0 0 0 2px #ff5d6c, 0 0 40px -4px #ff5d6c; animation: mnHitGlow 1s ease-out; }
@keyframes mnHitGlow { 0% { filter: brightness(2.2); } 100% { filter: none; } }
.mn-tile.hit .mn-bomb { animation: mnBombHit .5s cubic-bezier(.2, 1.8, .4, 1) .1s both; }
@keyframes mnBombHit { 0% { transform: scale(.2); opacity: 0; } 50% { transform: scale(1.35); opacity: 1; } 100% { transform: none; } }
/* the rest of the board once a game ends */
.mn-tile.dim .mn-back { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .04); background: #12161f; }
.mn-tile.dim .mn-back svg { opacity: .5; transform: scale(.78); filter: saturate(.6); }
.mn-tile.dim .mn-gem, .mn-tile.dim .mn-bomb { animation: mnDimIn .4s ease-out calc(var(--d, 0ms) + 120ms) both; }
@keyframes mnDimIn { from { opacity: 0; } to { opacity: .5; } }
.mn-tile.dim .mn-fuse { animation: none; opacity: .4; }
/* gem sparkle and mine blast (particles fly out along --a for --r px) */
.mn-burst, .mn-blast { position: absolute; left: 50%; top: 50%; width: 0; height: 0; z-index: 3; pointer-events: none; }
.mn-burst i { position: absolute; width: 6px; height: 6px; margin: -3px; border-radius: 50%; background: #b9ffe0; box-shadow: 0 0 8px #36e39a, 0 0 2px #fff;
  animation: mnFly .65s cubic-bezier(.15, .7, .3, 1) forwards; }
.mn-burst i:nth-child(even) { width: 4px; height: 4px; margin: -2px; background: #fff; }
@keyframes mnFly { 0% { transform: rotate(var(--a)) translateX(6px) scale(1); opacity: 1; } 100% { transform: rotate(var(--a)) translateX(var(--r)) scale(0); opacity: 0; } }
.mn-blast .ring { position: absolute; left: -40px; top: -40px; width: 80px; height: 80px; border-radius: 50%; border: 5px solid #ffb04a; opacity: 0;
  box-shadow: 0 0 30px #ff6a3d, inset 0 0 20px #ff6a3d; animation: mnRing .7s cubic-bezier(.2, .8, .3, 1) forwards; }
.mn-blast .ring.r2 { border-color: #ff5d6c; border-width: 3px; animation-delay: .1s; }
@keyframes mnRing { 0% { transform: scale(.3); opacity: 1; } 100% { transform: scale(2.6); opacity: 0; } }
.mn-blast i { position: absolute; width: 8px; height: 8px; margin: -4px; border-radius: 2px; background: #ffc940; box-shadow: 0 0 10px #ff6a3d;
  animation: mnFly .85s cubic-bezier(.1, .7, .3, 1) forwards; }
.mn-blast i:nth-child(3n) { background: #ff5d6c; }
.mn-blast i:nth-child(4n) { background: #fff3c4; width: 5px; height: 5px; margin: -2.5px; }

/* ========== Blackjack ========== */
.bj-acts { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.bj-acts button { display: flex; align-items: center; justify-content: center; gap: 7px; padding: 12px 6px; border-radius: 11px; font-weight: 700; font-size: 14px;
  background: var(--bg); border: 1px solid var(--line); box-shadow: 0 3px 0 rgba(0, 0, 0, .4); transition: transform .08s, border-color .15s, background .15s, opacity .2s; }
.bj-acts button:hover:not(:disabled) { border-color: color-mix(in srgb, var(--accent) 60%, transparent); background: color-mix(in srgb, var(--accent) 8%, var(--bg)); }
.bj-acts button:active:not(:disabled) { transform: translateY(2px); box-shadow: none; }
.bj-acts button:disabled { opacity: .38; cursor: not-allowed; box-shadow: none; }
.bj-acts button:not(:disabled) svg { color: var(--accent); }
.bj-acts svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.bj-ins { display: flex; flex-direction: column; gap: 10px; padding: 13px; border-radius: 13px; background: color-mix(in srgb, var(--accent) 7%, var(--bg));
  border: 1px solid color-mix(in srgb, var(--accent) 40%, transparent); animation: hgSlide .25s ease-out; }
.bj-ins > div:first-child { display: flex; flex-direction: column; gap: 4px; font-size: 13px; }
.bj-ins > div:first-child b { font-size: 15px; }
.bj-ins-btns { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.bj-ins-btns .hg-sub { padding: 10px 4px; font-size: 13px; }
.bj-ins-btns .hg-sub:first-child { color: var(--accent-ink); background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 75%, #fff), var(--accent)); border-color: transparent; }
.bj-rules { margin: auto 0 0; padding: 12px 14px 12px 28px; border-radius: 12px; background: var(--bg); border: 1px dashed var(--line); font-size: 12px; line-height: 1.75; }
.bj-rules li::marker { color: var(--accent); }

/* the table */
.bj-stage { padding-bottom: 18px; }
.bj-table { position: relative; flex: 1; min-height: 540px; display: flex; flex-direction: column; justify-content: space-between; align-items: center; gap: 12px;
  padding: 34px 20px 30px; border-radius: 18px; overflow: hidden; isolation: isolate;
  background: radial-gradient(ellipse 90% 70% at 50% 110%, color-mix(in srgb, var(--accent) 10%, transparent), transparent 70%),
    radial-gradient(ellipse 80% 60% at 50% 30%, #1b2131, #121620 75%);
  border: 1px solid var(--line); box-shadow: inset 0 0 80px rgba(0, 0, 0, .45); }
/* the arc printed on the felt */
.bj-table::before { content: ''; position: absolute; left: 6%; right: 6%; top: 38%; height: 120%; z-index: -1; border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, .05); box-shadow: 0 0 0 10px rgba(255, 255, 255, .015); }
.bj-felt-text { display: flex; flex-direction: column; align-items: center; gap: 3px; text-align: center; pointer-events: none; transition: opacity .3s; }
.bj-felt-text b { font-size: 15px; font-weight: 800; letter-spacing: .22em; color: color-mix(in srgb, var(--accent) 38%, rgba(255, 255, 255, .12)); }
.bj-felt-text span { font-size: 11px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: rgba(255, 255, 255, .14); }
.bj-table.done .bj-felt-text { opacity: 0; }
/* the shoe the cards come out of */
.bj-shoe { position: absolute; top: 18px; right: 22px; width: 60px; height: 82px; z-index: 1; }
.bj-shoe i { position: absolute; inset: 0; border-radius: 8px; background: var(--card-back); box-shadow: 0 2px 6px rgba(0, 0, 0, .5); }
.bj-shoe i:nth-child(1) { transform: translate(6px, 6px) rotate(8deg); opacity: .55; }
.bj-shoe i:nth-child(2) { transform: translate(3px, 3px) rotate(4deg); opacity: .8; }
.bj-zone { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.bj-player { flex-direction: row; justify-content: center; align-items: flex-end; gap: 46px; flex-wrap: wrap; }
.bj-hand { display: flex; justify-content: center; min-height: 130px; }
.bj-hand > .pc + .pc { margin-left: -54px; }
.bj-handbox { position: relative; display: flex; flex-direction: column; align-items: center; gap: 10px; transition: transform .3s, opacity .3s; }
.bj-player:has(.active) .bj-handbox:not(.active) { opacity: .5; transform: scale(.95); }
.bj-handbox.active { transform: translateY(-6px); }
.bj-handbox.active .bj-hand { filter: drop-shadow(0 0 14px color-mix(in srgb, var(--accent) 55%, transparent)); }
.bj-handbox.active .bj-val { border-color: var(--accent); }
.bj-tag { display: flex; align-items: center; gap: 8px; min-height: 28px; font-size: 13px; }
.bj-val { min-width: 40px; padding: 4px 11px; border-radius: 999px; text-align: center; font-weight: 800; font-size: 14px;
  background: rgba(0, 0, 0, .55); border: 1px solid rgba(255, 255, 255, .12); transition: background .2s, border-color .2s, color .2s; animation: bjVal .25s ease-out; }
.bj-val:empty { display: none; }
.bj-val.t21 { color: #1a1206; background: linear-gradient(180deg, var(--gold), var(--gold-2)); border-color: transparent; }
.bj-val.bust { color: #fff; background: #d63848; border-color: transparent; }
@keyframes bjVal { from { transform: scale(.7); opacity: 0; } }
.bj-bet { display: flex; align-items: center; gap: 5px; color: var(--muted); font-weight: 700; }
.bj-bet:empty { display: none; }
.bj-bet .coin { width: 15px; height: 15px; }
.bj-who { font-size: 11px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
/* result banner across a finished hand */
.bj-res { position: absolute; left: 50%; top: 65px; z-index: 4; display: none; flex-direction: column; align-items: center; gap: 1px; padding: 7px 16px;
  border-radius: 11px; white-space: nowrap; transform: translate(-50%, -50%) rotate(-4deg); box-shadow: 0 10px 30px -6px rgba(0, 0, 0, .7); pointer-events: none; }
.bj-res:not(:empty) { display: flex; animation: bjStamp .45s cubic-bezier(.2, 1.7, .4, 1) .15s both; }
.bj-res b { font-size: 17px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.bj-res span { font-size: 12px; font-weight: 700; }
@keyframes bjStamp { 0% { transform: translate(-50%, -50%) rotate(-4deg) scale(1.9); opacity: 0; } 100% { transform: translate(-50%, -50%) rotate(-4deg) scale(1); opacity: 1; } }
.r-win .bj-res { color: #04261a; background: linear-gradient(180deg, #8ff5c8, #2fcf86); }
.r-blackjack .bj-res { color: #1a1206; background: linear-gradient(180deg, #ffe08a, var(--gold) 50%, var(--gold-2)); box-shadow: 0 0 30px -4px var(--gold), 0 10px 30px -6px rgba(0, 0, 0, .7); }
.r-lose .bj-res, .r-bust .bj-res { color: #fff; background: linear-gradient(180deg, #ff7d89, #d63848); }
.r-push .bj-res { color: var(--text); background: #39425a; }
.r-lose .bj-hand, .r-bust .bj-hand { filter: brightness(.62) saturate(.7); transition: filter .4s .2s; }
.r-blackjack .bj-hand { animation: bjShine 1.6s ease-in-out .2s 2; }
@keyframes bjShine { 50% { filter: drop-shadow(0 0 18px rgba(255, 201, 64, .8)); } }
.bj-table .hg-pop { top: 50%; }

/* playing cards: .pc > .pc-in > .pc-front + .pc-back. .up turns it face up, .fly slides it in from the shoe */
.bj-table { --card-back:
  radial-gradient(circle at 50% 50%, transparent 0 9px, #fff 9.5px 15px, transparent 15.5px),
  radial-gradient(circle at 50% 50%, transparent 0 19px, rgba(255, 255, 255, .35) 19.5px 20.5px, transparent 21px),
  repeating-linear-gradient(45deg, rgba(255, 255, 255, .09) 0 2px, transparent 2px 8px),
  repeating-linear-gradient(-45deg, rgba(255, 255, 255, .09) 0 2px, transparent 2px 8px),
  linear-gradient(160deg, var(--accent), var(--accent-2)); }
.pc { --rest: translate(0, 0); position: relative; flex: none; width: 92px; height: 130px; perspective: 900px; transform: var(--rest); }
.pc-in { position: absolute; inset: 0; transform-style: preserve-3d; transform: rotateY(180deg); transition: transform .5s cubic-bezier(.3, 1.25, .5, 1); }
.pc.up .pc-in { transform: rotateY(0); }
.pc-face { position: absolute; inset: 0; border-radius: 10px; backface-visibility: hidden; -webkit-backface-visibility: hidden; overflow: hidden; }
.pc-front { background: linear-gradient(170deg, #ffffff, #eef0f6); color: #1b1f2a; box-shadow: 0 8px 20px -6px rgba(0, 0, 0, .7), inset 0 0 0 1px rgba(0, 0, 0, .08); }
.pc-front.red { color: #d6334a; }
.pc-back { transform: rotateY(180deg); background: var(--card-back); box-shadow: 0 8px 20px -6px rgba(0, 0, 0, .7), inset 0 0 0 4px #fff, inset 0 0 0 5px rgba(0, 0, 0, .15); }
.pc-c { position: absolute; display: flex; flex-direction: column; align-items: center; line-height: 1; }
.pc-c.tl { top: 7px; left: 7px; }
.pc-c.br { bottom: 7px; right: 7px; transform: rotate(180deg); }
.pc-c b { font-size: 19px; font-weight: 800; letter-spacing: -.04em; font-family: 'Bricolage Grotesque', system-ui, sans-serif; }
.pc-c i { font-style: normal; font-size: 15px; margin-top: 1px; }
.pc-mid { position: absolute; inset: 0; display: grid; place-items: center; font-size: 46px; line-height: 1; padding-top: 4px; }
.pc.fly { animation: pcFly .38s cubic-bezier(.2, .85, .3, 1) both; }
@keyframes pcFly { from { transform: translate(var(--dx), var(--dy)) rotate(-28deg) scale(.66); opacity: .5; } 70% { opacity: 1; } to { transform: var(--rest); } }
/* a doubled-down card lies sideways */
.pc.dbl { --rest: translate(-8px, -6px) rotate(90deg); }
.bj-hand > .pc.dbl { margin-left: -40px; }
/* empty spots before the first deal */
.pc.pc-ghost { border-radius: 10px; border: 2px dashed rgba(255, 255, 255, .08); background: rgba(255, 255, 255, .015); }
.bj-hand > .pc.pc-ghost + .pc.pc-ghost { margin-left: 10px; }

/* ---------- provably fair tab ---------- */
.pf-grid { display: grid; gap: 10px; margin: 6px 0 12px; }
.pf-grid > div { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.pf-grid .k { font-size: 12px; font-weight: 700; color: var(--muted); }
.pf-grid code { display: block; padding: 9px 11px; border-radius: 9px; background: var(--bg); border: 1px solid var(--line); font-size: 12px; word-break: break-all; }
.pf-prev { padding-top: 10px; border-top: 1px dashed var(--line); }
.pf-rotate { display: flex; gap: 8px; margin-bottom: 8px; }
.pf-rotate input { flex: 1; min-width: 0; padding: 10px 12px; border-radius: 10px; border: 1px solid var(--line); background: var(--bg); outline: none; }
.pf-rotate input:focus { border-color: var(--gold); }

/* ---------- small screens: game on top, controls under it ---------- */
@media (max-width: 960px) {
  .hg { padding: 14px; }
  .hg-wrap { grid-template-columns: minmax(0, 1fr); min-height: 0; }
  .hg-side { min-width: 0; }
  .hg-stage { order: -1; }
  .hg-side { border-right: 0; border-top: 1px solid var(--line); }
  .bj-rules { margin-top: 0; }
}
@media (max-width: 620px) {
  .hg-stage { padding: 12px; gap: 12px; }
  .dc-track { --pad: 20px; padding-top: 80px; }
  .dc-inputs { grid-template-columns: 1fr; padding: 10px; gap: 10px; }
  .mn-board { gap: 7px; }
  .lm-board { min-height: 260px; }
  .lm-inputs { grid-template-columns: 1fr 1fr; }
  .kn-board { gap: 5px; }
  .kn-tile { font-size: 13px; border-radius: 8px; }
  .kn-pay { gap: 3px; }
  .kn-pay > div { padding: 6px 1px; }
  .kn-pay b { font-size: 10px; }
  .mn-step:nth-child(n+5) { display: none; }
  .mn-front, .mn-back, .mn-tile { border-radius: 10px; }
  .bj-table { min-height: 440px; padding: 26px 8px 22px; }
  .bj-shoe { width: 44px; height: 60px; top: 12px; right: 12px; }
  .pc { width: 64px; height: 92px; }
  .bj-hand { min-height: 92px; }
  .bj-hand > .pc + .pc { margin-left: -36px; }
  .bj-hand > .pc.dbl { margin-left: -24px; }
  .pc-c b { font-size: 15px; } .pc-c i { font-size: 12px; } .pc-c.tl { top: 5px; left: 5px; } .pc-c.br { bottom: 5px; right: 5px; }
  .pc-mid { font-size: 32px; }
  .bj-player { gap: 22px; }
  .bj-res { top: 46px; }
  .bj-res b { font-size: 14px; }
  .hg-pop b { font-size: 28px; }
}