@font-face { font-family: 'Inter'; font-weight: 500; font-display: swap; src: url('../fonts/inter-500.woff') format('woff'); }
@font-face { font-family: 'Inter'; font-weight: 600; font-display: swap; src: url('../fonts/inter-600.woff') format('woff'); }
@font-face { font-family: 'Inter Display'; font-weight: 700; font-display: swap; src: url('../fonts/inter-display-700.woff') format('woff'); }
@font-face { font-family: 'Inter Display'; font-weight: 900; font-display: swap; src: url('../fonts/inter-display-900.woff') format('woff'); }

:root {
  --black: #0e0f11;      /* matte black, app ground */
  --graphite: #16181b;   /* stage */
  --panel: #1c1e22;      /* control surfaces */
  --raise: #26292e;      /* pressable */
  --line: rgba(255, 255, 255, 0.06);
  --text: #eceef1;
  --muted: #8b919a;
  --faint: #5c626b;
  --amber: #f2a33a;
  --amber-ink: #1d1305;
  --win: #41d89a;
  --loss: #ff5b52;
  --r-s: 10px;
  --r-m: 14px;
  --r-l: 20px;
  --ui: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --num: 'Inter Display', 'Inter', system-ui, -apple-system, Roboto, sans-serif;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body {
  margin: 0; height: 100%;
  background: var(--black); color: var(--text);
  font-family: var(--ui);
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
  overscroll-behavior: none;
  user-select: none; -webkit-user-select: none;
}
button { font: inherit; color: inherit; border: 0; background: none; padding: 0; cursor: pointer; touch-action: manipulation; }
button:focus-visible, input:focus-visible { outline: 2px solid var(--amber); outline-offset: 2px; }
.num { font-family: var(--num); font-variant-numeric: tabular-nums; font-feature-settings: 'tnum' 1, 'case' 1; }

.app {
  display: flex; flex-direction: column;
  height: var(--tg-viewport-stable-height, 100dvh);
  max-width: 520px; margin: 0 auto;
  padding-top: env(safe-area-inset-top);
}

/* ---------- top bar ---------- */
.top { display: flex; align-items: center; gap: 10px; padding: 12px 16px 10px; }
.brand { font: 700 20px/1 var(--num); letter-spacing: -0.02em; }
.status {
  display: inline-flex; align-items: center; gap: 7px;
  height: 26px; padding: 0 10px; border-radius: 999px;
  background: var(--panel); color: var(--muted);
  font: 500 12px/1 var(--ui); white-space: nowrap;
}
.status i { width: 6px; height: 6px; border-radius: 50%; background: var(--faint); }
.status[data-phase="betting"] i { background: var(--text); }
.status[data-phase="flying"] i { background: var(--amber); box-shadow: 0 0 0 3px rgba(242, 163, 58, 0.18); }
.status[data-phase="crashed"] i { background: var(--loss); }
.status[data-phase="offline"] { color: #ffb0ab; }
.status[data-phase="offline"] i { background: var(--loss); animation: blink 1s steps(2) infinite; }
.status[data-phase="loading"] i { animation: blink 1s steps(2) infinite; }
@keyframes blink { 50% { opacity: 0.2; } }
.icon-btn {
  flex: none; width: 34px; height: 34px; margin-left: 2px; border-radius: 10px;
  display: grid; place-items: center; background: var(--panel); color: var(--muted);
}
.icon-btn:active { background: var(--raise); color: var(--text); }
.balance { margin-left: auto; text-align: right; line-height: 1; }
.balance small { display: block; font: 500 11px/1 var(--ui); color: var(--muted); margin-bottom: 4px; }
.balance b { font: 700 17px/1 var(--num); font-variant-numeric: tabular-nums; }

/* ---------- history strip ---------- */
.history {
  display: flex; gap: 6px; padding: 0 16px 10px; overflow-x: auto; scrollbar-width: none;
  mask-image: linear-gradient(90deg, #000 85%, transparent);
  -webkit-mask-image: linear-gradient(90deg, #000 85%, transparent);
}
.history::-webkit-scrollbar { display: none; }
.hchip {
  flex: none; height: 24px; padding: 0 8px; border-radius: 7px;
  display: inline-flex; align-items: center;
  background: var(--panel); color: var(--muted);
  font: 700 12px/1 var(--num); font-variant-numeric: tabular-nums;
}
.hchip.mid { color: var(--amber); }
.hchip.high { color: #ffcf86; background: #2a2215; }
.hchip:active { filter: brightness(1.25); }

/* ---------- stage ---------- */
.stage {
  position: relative; flex: 1 1 auto; min-height: 230px;
  margin: 0 10px; border-radius: var(--r-l); overflow: hidden;
  background: var(--graphite);
  box-shadow: inset 0 0 0 1px var(--line);
  contain: strict;
}
.stage canvas { position: absolute; left: 0; top: 0; }
.stage canvas.plane { will-change: transform; pointer-events: none; }
.stage canvas.front { pointer-events: none; }

.hud {
  position: absolute; left: 0; right: 0; top: 9%;
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  pointer-events: none; text-align: center;
}
.hud-label { height: 14px; font: 500 13px/1 var(--ui); color: var(--muted); }
.mult {
  font: 900 clamp(52px, 17vw, 76px)/0.9 var(--num);
  letter-spacing: -0.035em;
  font-variant-numeric: tabular-nums;
  color: var(--text);
  text-shadow: 0 2px 24px rgba(0, 0, 0, 0.55);
}
.mult .x { font-size: 0.6em; margin-left: 0.05em; opacity: 0.7; font-weight: 700; }
.hud[data-phase="betting"] .mult { font-size: clamp(40px, 12vw, 52px); color: var(--text); }
.hud[data-phase="betting"] .mult .x { font-size: 0.5em; margin-left: 0.22em; color: var(--muted); font-weight: 700; }
.hud[data-phase="crashed"] .mult { color: var(--loss); }
.app[data-offline="1"] .mult { opacity: 0.35; transition: opacity 0.3s; }
.hud[data-phase="crashed"] .hud-label { color: var(--loss); }
.countdown { width: 112px; height: 3px; border-radius: 3px; background: rgba(255, 255, 255, 0.08); overflow: hidden; visibility: hidden; }
.countdown i { display: block; height: 100%; width: 100%; background: var(--text); transform-origin: left; }
.hud[data-phase="betting"] .countdown { visibility: visible; }

.players {
  position: absolute; top: 10px; right: 10px; height: 26px; padding: 0 9px; border-radius: 999px;
  display: inline-flex; align-items: center; gap: 6px;
  background: rgba(14, 15, 17, 0.55); color: var(--muted);
  font: 600 12px/1 var(--ui); font-variant-numeric: tabular-nums;
  box-shadow: inset 0 0 0 1px var(--line);
}
.players:active { color: var(--text); }

.toast {
  position: absolute; left: 50%; bottom: 14px; transform: translate(-50%, 8px);
  padding: 9px 14px; border-radius: 11px;
  background: rgba(30, 32, 36, 0.96); color: var(--text);
  font: 500 13px/1.2 var(--ui); white-space: nowrap;
  opacity: 0; transition: opacity 0.18s, transform 0.18s; pointer-events: none;
}
.toast.show { opacity: 1; transform: translate(-50%, 0); }
.toast.err { color: #ffb0ab; }

/* ---------- controls ---------- */
.controls { padding: 12px 16px calc(14px + env(safe-area-inset-bottom)); }
.betrow { display: grid; grid-template-columns: 1fr 92px; gap: 6px; }
.auto {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  height: 56px; border-radius: var(--r-m); background: var(--panel);
}
.auto small { font: 500 11px/1 var(--ui); color: var(--muted); margin-bottom: 4px; }
.auto span { display: flex; align-items: baseline; justify-content: center; width: 100%; padding: 0 8px; }
.auto input {
  all: unset; width: 100%; min-width: 0; text-align: center;
  font: 700 19px/1 var(--num); font-variant-numeric: tabular-nums; color: var(--text);
  user-select: text; -webkit-user-select: text;
}
.auto input::placeholder { color: var(--faint); font-weight: 600; font-size: 15px; }
.auto input:placeholder-shown + em { display: none; }
.auto em { font: 700 14px/1 var(--num); font-style: normal; color: var(--muted); margin-left: 1px; }
.auto input:disabled { color: var(--muted); }
.stepper {
  display: grid; grid-template-columns: 48px 1fr 48px; align-items: center; gap: 6px;
  height: 56px; padding: 6px; border-radius: var(--r-m); background: var(--panel);
}
.stepper button {
  height: 44px; border-radius: var(--r-s); background: var(--raise);
  font: 500 24px/1 var(--ui); color: var(--text);
  display: grid; place-items: center;
}
.stepper button:active { background: #30343a; }
.stepper button:disabled { opacity: 0.35; }
.amount { display: flex; flex-direction: column; align-items: center; justify-content: center; }
.amount small { font: 500 11px/1 var(--ui); color: var(--muted); margin-bottom: 4px; }
.amount input {
  all: unset; width: 100%; text-align: center;
  font: 700 22px/1 var(--num); font-variant-numeric: tabular-nums; color: var(--text);
  user-select: text; -webkit-user-select: text;
}
.amount input:disabled { color: var(--muted); }

.quick { display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px; margin-top: 8px; }
.quick button {
  height: 34px; border-radius: 9px; background: var(--panel); color: var(--muted);
  font: 600 13px/1 var(--ui); font-variant-numeric: tabular-nums;
}
.quick button:active { background: var(--raise); color: var(--text); }
.quick button:disabled { opacity: 0.35; }

.primary {
  position: relative; display: flex; align-items: center; justify-content: center; gap: 10px;
  width: 100%; height: 64px; margin-top: 10px; border-radius: var(--r-m);
  font: 700 19px/1 var(--num); letter-spacing: -0.01em;
  transition: background-color 0.15s, color 0.15s, transform 0.08s;
}
.primary b { font-weight: 900; font-variant-numeric: tabular-nums; }
.primary:active:not(:disabled) { transform: scale(0.985); }
.primary[data-kind="bet"] { background: var(--text); color: #111214; }
.primary[data-kind="next"] { background: transparent; color: var(--text); box-shadow: inset 0 0 0 1.5px rgba(236, 238, 241, 0.28); }
.primary[data-kind="cancel"] { background: var(--raise); color: var(--text); }
.primary[data-kind="cash"] { background: var(--amber); color: var(--amber-ink); box-shadow: 0 6px 24px -8px rgba(242, 163, 58, 0.55); }
.primary[data-kind="won"] { background: #13261d; color: var(--win); }
.primary[data-kind="lost"] { background: #2a1817; color: var(--loss); }
.primary:disabled { cursor: default; }
.primary[data-busy="1"]::after {
  content: ''; position: absolute; right: 18px; width: 16px; height: 16px; border-radius: 50%;
  border: 2px solid currentColor; border-right-color: transparent; animation: spin 0.7s linear infinite; opacity: 0.6;
}
@keyframes spin { to { transform: rotate(360deg); } }

.meta { display: flex; justify-content: space-between; gap: 12px; margin-top: 9px; font: 500 12px/1.2 var(--ui); color: var(--muted); }
.meta b { color: var(--text); font-weight: 600; font-variant-numeric: tabular-nums; }

@media (max-height: 640px) {
  .top { padding: 8px 14px 6px; }
  .history { padding-bottom: 6px; }
  .controls { padding-top: 8px; }
  .stepper, .auto { height: 50px; }
  .stepper button { height: 38px; }
  .quick button { height: 30px; }
  .primary { height: 56px; margin-top: 8px; }
}
@media (max-width: 350px) {
  .betrow { grid-template-columns: 1fr 80px; }
  .quick button { font-size: 12px; }
}

/* ---------- sheet: players / my bets / fairness ---------- */
.sheet { position: fixed; inset: 0; z-index: 50; }
.sheet-back { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.55); opacity: 0; transition: opacity 0.2s; }
.sheet-card {
  position: absolute; left: 0; right: 0; bottom: 0; max-width: 520px; margin: 0 auto;
  max-height: 80%; display: flex; flex-direction: column;
  background: #141619; border-radius: 20px 20px 0 0; box-shadow: 0 -1px 0 var(--line);
  padding: 12px 14px calc(12px + env(safe-area-inset-bottom));
  transform: translateY(100%); transition: transform 0.22s cubic-bezier(.2, .8, .2, 1);
}
.sheet.open .sheet-back { opacity: 1; }
.sheet.open .sheet-card { transform: none; }
.sheet-head { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.tabs { flex: 1; display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; padding: 4px; border-radius: 12px; background: var(--panel); }
.tabs button { height: 32px; border-radius: 9px; font: 600 13px/1 var(--ui); color: var(--muted); }
.tabs button.on { background: var(--raise); color: var(--text); }
.sheet-x { flex: none; width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; color: var(--muted); background: var(--panel); }
.sheet-body { overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; min-height: 160px; user-select: text; -webkit-user-select: text; }
.sum { font: 500 12px/1.3 var(--ui); color: var(--muted); margin: 4px 2px 8px; }
.empty { padding: 34px 0; text-align: center; color: var(--muted); font: 500 13px/1.3 var(--ui); }
.prow {
  display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(92px, auto); gap: 12px; align-items: center;
  padding: 11px 2px; border-bottom: 1px solid var(--line); font: 500 14px/1.2 var(--ui);
}
.prow .pn { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.prow.me .pn { color: var(--amber); }
.prow .pa { font: 700 14px/1 var(--num); font-variant-numeric: tabular-nums; color: var(--text); }
.ps { text-align: right; font: 600 13px/1 var(--num); font-variant-numeric: tabular-nums; color: var(--muted); }
.ps.cashed { color: var(--win); }
.ps.lost { color: var(--loss); }
.bonus { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px; margin-bottom: 6px; border-radius: 14px; background: var(--panel); }
.bonus b { display: block; font: 600 14px/1.2 var(--ui); }
.bonus small { color: var(--muted); font: 500 12px/1.3 var(--ui); }
.bonus button { flex: none; height: 38px; padding: 0 16px; border-radius: 10px; background: var(--text); color: #111214; font: 700 14px/1 var(--ui); }
.rules { margin: 2px 2px 10px; font: 500 13px/1.5 var(--ui); color: var(--muted); }
.rules code, .kv code { font: 500 11.5px/1.45 ui-monospace, 'SF Mono', Menlo, Consolas, monospace; color: var(--text); }
.formula {
  margin: 0 2px 12px; padding: 10px 12px; border-radius: 10px; background: var(--panel);
  font: 500 11.5px/1.6 ui-monospace, 'SF Mono', Menlo, Consolas, monospace; color: var(--text);
  white-space: pre-wrap; word-break: break-word;
}
.kv { display: flex; flex-direction: column; gap: 3px; padding: 8px 2px; border-top: 1px solid var(--line); }
.kv span { font: 500 11px/1.2 var(--ui); color: var(--muted); }
.kv code { word-break: break-all; }
.kv code.ok, .fair-row.ok { color: var(--win); }
.kv code.bad, .fair-row.bad { color: var(--loss); }
.vlist { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 2px 10px; }
.fair-row { padding: 10px 2px; font: 500 13px/1.3 var(--ui); }
.fair-row.muted { color: var(--muted); }

.fatal { position: fixed; inset: 0; z-index: 60; display: grid; place-items: center; background: var(--black); text-align: center; padding: 24px; }
.fatal b { font: 700 28px/1 var(--num); }
.fatal p { color: var(--muted); font: 500 15px/1.4 var(--ui); margin: 12px 0 18px; }
.fatal button { height: 46px; padding: 0 22px; border-radius: 12px; background: var(--raise); font: 600 15px/1 var(--ui); }

@media (prefers-reduced-motion: reduce) {
  .primary, .toast, .sheet-card, .sheet-back { transition: none; }
  .status i { animation: none !important; }
}