/**
 * bankroll-calc.css — mobile first
 */
#btf-bankroll-calc { margin: 0; }

.bk-section { margin-bottom: 16px; }
.bk-label { font-size: 0.7rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; color: var(--ink4); margin-bottom: 8px; }

/* Game type buttons */
.bk-game-btns {
  display: flex; flex-wrap: nowrap; gap: 6px;
  overflow-x: auto; overflow-anchor: none; -webkit-overflow-scrolling: touch; scrollbar-width: none;
  mask-image: linear-gradient(to right, #000 85%, transparent 100%);
  -webkit-mask-image: linear-gradient(to right, #000 85%, transparent 100%);
}
.bk-game-btns::-webkit-scrollbar { display: none; }
.bk-game-btn {
  padding: 8px 14px; border-radius: var(--radius-sm); border: 1px solid var(--rule);
  background: var(--bg); font-size: 0.78rem; font-weight: 600; color: var(--ink3);
  cursor: pointer; transition: all 0.15s; white-space: nowrap; flex-shrink: 0;
}
.bk-game-btn.active { background: var(--felt); color: #fff; border-color: var(--felt); }
.bk-game-btn:hover:not(.active) { border-color: var(--felt); color: var(--felt); }

/* Input */
.bk-input {
  width: 100%; padding: 10px 12px; border: 1px solid var(--rule); border-radius: var(--radius-sm);
  background: var(--bg); font-family: 'JetBrains Mono', monospace; font-size: 1rem; font-weight: 600;
  color: var(--ink);
}
.bk-input:focus { border-color: var(--felt); outline: none; }

/* Buy-in presets */
.bk-presets {
  display: flex; flex-wrap: nowrap; gap: 4px; margin-top: 8px;
  overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none;
  mask-image: linear-gradient(to right, #000 85%, transparent 100%);
  -webkit-mask-image: linear-gradient(to right, #000 85%, transparent 100%);
}
.bk-presets::-webkit-scrollbar { display: none; }
.bk-preset-btn {
  padding: 4px 10px; border-radius: 100px; border: 1px solid var(--rule);
  background: var(--bg); font-family: 'JetBrains Mono', monospace;
  font-size: 0.72rem; font-weight: 600; color: var(--ink4); cursor: pointer; transition: all 0.15s;
  white-space: nowrap; flex-shrink: 0;
}
.bk-preset-btn.active { background: var(--felt-bg); color: var(--felt); border-color: var(--felt); }
.bk-preset-btn:hover:not(.active) { border-color: var(--felt); color: var(--felt); }

/* Risk tolerance */
.bk-risk-btns { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.bk-risk-btn {
  padding: 12px; border-radius: var(--radius-sm); border: 2px solid var(--rule);
  background: var(--bg); cursor: pointer; text-align: center; transition: all 0.15s;
}
.bk-risk-btn.active { border-color: var(--felt); background: var(--felt-bg); }
.bk-risk-btn:hover:not(.active) { border-color: var(--felt); }
.bk-risk-name { display: block; font-size: 0.82rem; font-weight: 700; color: var(--ink); margin-bottom: 2px; }
.bk-risk-bi { display: block; font-family: 'JetBrains Mono', monospace; font-size: 0.72rem; color: var(--ink4); }

/* Calculate */
.bk-calc-btn {
  width: 100%; padding: 14px; background: var(--felt); color: #fff; border: none;
  border-radius: var(--radius-sm); font-size: 0.9rem; font-weight: 700;
  cursor: pointer; transition: background 0.15s; margin-bottom: 20px;
}
.bk-calc-btn:hover { background: var(--felt2); }

/* Results */
.bk-results { margin-top: 8px; }
#btf-bankroll-calc { max-width: 100%; overflow-x: hidden; }
#btf-bankroll-calc table { width: 100%; overflow-x: auto; display: block; -webkit-overflow-scrolling: touch; }
#btf-bankroll-calc table th,
#btf-bankroll-calc table td { white-space: nowrap; }
.bk-result-main {
  text-align: center; padding: 24px 16px; background: var(--bg);
  border: 2px solid var(--felt); border-radius: var(--radius-sm); margin-bottom: 14px;
}
.bk-result-label { font-size: 0.72rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; color: var(--ink4); margin-bottom: 4px; }
.bk-result-amount { font-family: 'JetBrains Mono', monospace; font-size: 2.4rem; font-weight: 800; color: var(--felt); line-height: 1.1; }
.bk-result-detail { font-size: 0.78rem; color: var(--ink3); margin-top: 6px; }

.bk-result-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.bk-result-card {
  padding: 14px; background: var(--bg); border: 1px solid var(--rule);
  border-radius: var(--radius-sm); text-align: center;
}
.bk-rc-label { font-size: 0.7rem; color: var(--ink4); margin-bottom: 4px; }
.bk-rc-val { font-family: 'JetBrains Mono', monospace; font-size: 1.1rem; font-weight: 800; color: var(--ink); }
.bk-val-up { color: var(--felt); }
.bk-val-down { color: var(--red); }
.bk-rc-note { font-size: 0.68rem; color: var(--ink4); margin-top: 2px; }

@media (min-width: 640px) {
  .bk-result-amount { font-size: 3rem; }
}