:root {
  --bg: #0d1b33;
  --bg2: #14264a;
  --card: #1a2f57;
  --gold: #c9a84c;
  --gold2: #e6c76a;
  --text: #e8edf7;
  --muted: #8fa3c8;
  --free: #1d3a6e;
  --mine: #0f5e3f;
  --wait: #6b5a1e;
  --busy: #3a2a35;
  --danger: #ff6b6b;
  --ok: #43d17c;
}

* { margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

body {
  background: var(--bg);
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  min-height: 100vh;
  padding: 12px 12px 24px;
  max-width: 560px;
  margin: 0 auto;
}

.top {
  background: linear-gradient(135deg, var(--bg2), var(--card));
  border: 1px solid rgba(201,168,76,.25);
  border-radius: 16px;
  padding: 12px 14px;
  margin-bottom: 12px;
}
.row { display: flex; justify-content: space-between; gap: 8px; }
.row.small { margin-top: 8px; font-size: 13px; color: var(--muted); }
.stat { display: flex; flex-direction: column; }
.stat .label { font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.stat .val { font-size: 20px; font-weight: 700; }
.gold { color: var(--gold2); }

.legend { display: flex; flex-wrap: wrap; gap: 10px; font-size: 12px; color: var(--muted); margin-bottom: 10px; }
.legend span { display: inline-flex; align-items: center; gap: 5px; }
.sq { width: 12px; height: 12px; border-radius: 3px; display: inline-block; }
.sq.free { background: var(--free); }
.sq.mine { background: var(--mine); }
.sq.wait { background: var(--wait); }
.sq.busy { background: var(--busy); }

.grid {
  display: grid;
  gap: 5px;
  margin-bottom: 14px;
}
.cell {
  aspect-ratio: 1;
  border-radius: 9px;
  background: var(--free);
  color: var(--text);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  font-weight: 600;
  border: 1px solid rgba(255,255,255,.06);
  cursor: pointer;
  user-select: none;
  transition: transform .08s, background .15s;
}
.cell:active { transform: scale(.92); }
.cell.paid { background: var(--busy); color: #5c4a55; cursor: default; }
.cell.paid::after { content: "✕"; }
.cell.paid span { display: none; }
.cell.pending { background: var(--wait); color: var(--gold); cursor: default; }
.cell.pending::after { content: "⏳"; }
.cell.pending span { display: none; }
.cell.mine { background: var(--mine); color: var(--ok); }
.cell.mine.paid { background: var(--mine); color: var(--ok); border-color: var(--ok); }
.cell.mine.paid::after { content: "✕"; }
.cell.mine.paid span { display: none; }
.cell.mine.pending { background: var(--wait); color: var(--ok); border-color: var(--ok); }
.cell.mine.pending::after { content: "⏳"; }
.cell.mine.pending span { display: none; }
.cell.selected { background: var(--gold); color: #0d1b33; border-color: var(--gold2); }

.notice {
  background: var(--bg2);
  border: 1px solid rgba(201,168,76,.35);
  border-radius: 12px;
  padding: 10px 12px;
  font-size: 14px;
  margin-bottom: 12px;
}
.hidden { display: none !important; }

.actions { display: flex; flex-direction: column; gap: 8px; }
.btn {
  border: none;
  border-radius: 12px;
  padding: 14px 16px;
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
  transition: opacity .15s, transform .08s;
}
.btn:active { transform: scale(.98); }
.btn.primary { background: linear-gradient(135deg, var(--gold), var(--gold2)); color: #0d1b33; }
.btn.primary:disabled { opacity: .45; cursor: default; }
.btn.ghost { background: var(--card); color: var(--text); border: 1px solid rgba(255,255,255,.1); }

.hint { margin-top: 12px; font-size: 12px; color: var(--muted); text-align: center; }

.toast {
  position: fixed;
  left: 50%;
  bottom: 28px;
  transform: translateX(-50%);
  background: #0a1428;
  border: 1px solid rgba(201,168,76,.5);
  color: var(--text);
  padding: 12px 18px;
  border-radius: 14px;
  font-size: 14px;
  max-width: 90vw;
  text-align: center;
  z-index: 99;
  box-shadow: 0 8px 30px rgba(0,0,0,.5);
}
.toast.err { border-color: var(--danger); }

/* ── вкладки ── */
.tabs {
  position: fixed;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  max-width: 560px;
  display: flex;
  background: #0a1428;
  border-top: 1px solid rgba(201,168,76,.2);
  padding: 8px 8px calc(8px + env(safe-area-inset-bottom));
  gap: 6px;
  z-index: 50;
}
.tab {
  flex: 1;
  background: transparent;
  border: none;
  color: var(--muted);
  font-size: 14px;
  font-weight: 600;
  padding: 10px 0;
  border-radius: 10px;
  cursor: pointer;
}
.tab.active { background: var(--card); color: var(--gold2); }
body { padding-bottom: 90px; }

/* ── секции ── */
.sec-title { font-size: 16px; margin: 18px 0 10px; color: var(--gold2); }
.hidden { display: none !important; }

/* ── форматы ── */
.formats-list { display: flex; flex-direction: column; gap: 8px; }
.fmt-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  background: var(--card);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 12px;
  padding: 12px 14px;
}
.fmt-desc { font-size: 14px; }
.btn.small { padding: 8px 14px; font-size: 14px; border-radius: 9px; background: var(--bg2); color: var(--gold2); border: 1px solid rgba(201,168,76,.4); }
.format-pick { margin-top: 12px; }
.fp-row { display: flex; gap: 8px; }
.fmt-input {
  flex: 1;
  background: var(--bg2);
  border: 1px solid rgba(201,168,76,.4);
  border-radius: 12px;
  color: var(--text);
  font-size: 18px;
  font-weight: 700;
  text-align: center;
  padding: 12px;
  letter-spacing: .1em;
  outline: none;
}
.fmt-input:focus { border-color: var(--gold2); }

/* ── баланс ── */
.balance-card {
  background: linear-gradient(135deg, var(--bg2), var(--card));
  border: 1px solid rgba(201,168,76,.3);
  border-radius: 16px;
  padding: 18px;
  margin-top: 4px;
}
.bc-bal { display: flex; align-items: baseline; gap: 6px; }
.bc-bal .val { font-size: 34px; }
.bc-bal .sub { color: var(--muted); font-size: 13px; }
.bc-row { display: flex; justify-content: space-between; margin-top: 12px; font-size: 14px; color: var(--muted); }
.bc-row span:last-child { color: var(--text); font-weight: 600; }
.dep-btns { display: flex; gap: 8px; flex-wrap: wrap; }
.dep-btn { flex: 1; min-width: 90px; }
.my-row { display: flex; flex-wrap: wrap; gap: 6px; }
.my-num {
  min-width: 34px;
  height: 34px;
  padding: 0 6px;
  border-radius: 9px;
  background: var(--free);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 14px;
}
.my-num.ok { background: var(--mine); color: var(--ok); }
.my-num.wait { background: var(--wait); color: var(--gold); }
.my-bets { display: flex; flex-direction: column; gap: 6px; }
.bet-item {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--card);
  border-radius: 10px;
  padding: 10px 12px;
  font-size: 13px;
}
.bet-item .bet-pick { color: var(--gold2); font-weight: 700; margin-left: auto; }
.bet-item .bet-status { margin-left: 6px; }