:root {
  --bg: #0a0a0e;
  --stage: #0c0c11;
  --panel: #15151c;
  --line: #1b1b24;
  --text: #f1f2f6;
  --hint: #868b99;
  --green: #2fa85a;
  --green-bright: #3ddc84;
  --red: #e23b4e;
  --amber: #e7b743;
  --accent: #7c5cff;
  --accent-press: #6a49f0;
  --pill: #1c1c24;
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; color: var(--text);
  font-family: -apple-system, system-ui, "Segoe UI", Roboto, sans-serif; }
/* Page background (NOT the reel/panels) — a soft purple-tinted dark gradient instead of flat black. */
html { background: #0a0910; }
body { background: radial-gradient(1100px 640px at 50% -6%, #1d1830 0%, #120f1c 44%, #0a0910 100%)
  no-repeat fixed; }
#app { display: flex; flex-direction: column; min-height: 100vh; width: 100%; max-width: 460px;
  margin: 0 auto; padding: env(safe-area-inset-top) 10px env(safe-area-inset-bottom); gap: 10px; }

/* ---------- top bar: balance + history pills + stats ---------- */
#topbar { display: flex; align-items: center; gap: 8px; padding-top: 8px; }
.balance { font-weight: 800; font-size: 17px; white-space: nowrap; }
.history-wrap { margin-left: auto; display: flex; align-items: center; gap: 6px; overflow: hidden; }
/* row-reverse → newest on the right; the left edge fades so an oldest pill that clips never
   collides with the balance (it dissolves into the gap instead of sticking out behind it). */
.history { display: flex; gap: 6px; overflow: hidden; flex-direction: row-reverse;
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 32px);
  mask-image: linear-gradient(to right, transparent 0, #000 32px); }
.histpill { flex: 0 0 auto; font-size: 13px; font-weight: 700; padding: 6px 9px; border-radius: 8px;
  border: 0; background: var(--pill); color: #c9ccd6; line-height: 1; cursor: pointer; }
.histpill.win { background: var(--green); color: #fff; }
.histpill.gold { background: linear-gradient(135deg, #ffd75e, #e79a18); color: #1a1a1a; }
.histpill.stats { display: inline-flex; align-items: center; justify-content: center; color: #c9ccd6;
  padding: 6px 8px; }
.histpill.stats:active { color: #fff; }

/* ---------- stage / reel ---------- */
#stage { position: relative; background: var(--stage); border-radius: 14px; overflow: hidden;
  aspect-ratio: 16 / 12; min-height: 300px; max-height: 52vh; }
#reel { width: 100%; height: 100%; display: block; }

/* win popup (green card over the landing card) */
.win-pop { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  display: flex; flex-direction: column; align-items: stretch; width: 168px; border-radius: 14px;
  overflow: hidden; pointer-events: none; box-shadow: 0 8px 30px rgba(0,0,0,.5);
  animation: popin .25s ease; }
@keyframes popin { from { transform: translate(-50%, -46%) scale(.9); opacity: 0; }
  to { transform: translate(-50%, -50%) scale(1); opacity: 1; } }
.win-mult { background: var(--green-bright); color: #08210f; font-size: 30px; font-weight: 800;
  text-align: center; padding: 16px 10px; font-variant-numeric: tabular-nums; }
.win-amount { background: #0e1a12; color: #eafff0; font-size: 17px; font-weight: 700;
  text-align: center; padding: 10px; font-variant-numeric: tabular-nums; }

.net-status { position: absolute; right: 12px; bottom: 10px; font-size: 11px; color: var(--hint);
  display: flex; align-items: center; gap: 6px; pointer-events: none; }
.net-status .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--green-bright);
  box-shadow: 0 0 6px var(--green-bright); }
.net-status .dot.off { background: var(--red); box-shadow: 0 0 6px var(--red); }

/* summary strip below the reel */
#bottombar { padding: 2px 4px; }
.progress { height: 3px; border-radius: 2px; background: #1c1c24; overflow: hidden; margin-bottom: 7px; }
#progress-fill { height: 100%; width: 0%; background: var(--accent); transition: width .25s linear; border-radius: 2px; }
.bottom-row { display: flex; justify-content: space-between; align-items: center; font-size: 12px; color: var(--hint); }
.players { display: flex; align-items: center; gap: 6px; }
.players .pdot { width: 7px; height: 7px; border-radius: 50%; background: var(--green-bright); }
.round-status { font-weight: 600; color: #aeb2bf; }

/* ---------- bet panel ---------- */
#panel { background: var(--panel); border-radius: 14px; padding: 12px; }
.action { width: 100%; padding: 15px; font-size: 18px; font-weight: 800; border: 0; border-radius: 12px;
  background: var(--accent); color: #fff; transition: opacity .15s, background .15s; letter-spacing: .3px;
  margin-bottom: 12px; }
.action:active { background: var(--accent-press); }
.action:disabled { opacity: .4; }
.field { margin-bottom: 10px; }
.field-label { font-size: 12px; color: var(--hint); margin-bottom: 5px; }
.field-row { display: flex; gap: 8px; align-items: stretch; }
.field-row input { flex: 1 1 auto; font-size: 17px; padding: 11px; border-radius: 10px;
  border: 1px solid #262630; background: #0e0e14; color: var(--text); width: 100%;
  text-align: center; font-variant-numeric: tabular-nums; }
.field-row input:focus { outline: none; border-color: #3a3a48; }
.chip { flex: 0 0 auto; min-width: 50px; padding: 0 14px; font-size: 16px; font-weight: 700;
  border: 1px solid #262630; border-radius: 10px; background: #14141c; color: #cfd2db; }
.chip:active { background: #20202c; }
.chip.step { min-width: 48px; font-size: 22px; }

/* sound on/off toggle + volume slider — under the multiplier row (under the «−» button) */
.sound-row { margin-top: 8px; display: flex; align-items: center; gap: 12px; }
.sound-btn { flex: 0 0 auto; width: 48px; height: 40px; border: 1px solid #262630; border-radius: 10px;
  background: #14141c; color: #cfd2db; font-size: 18px; line-height: 1; cursor: pointer; }
.sound-btn:active { background: #20202c; }
.sound-btn.off { opacity: .5; }
.vol { flex: 1 1 auto; max-width: 240px; height: 5px; -webkit-appearance: none; appearance: none;
  background: #2a2a36; border-radius: 3px; outline: none; cursor: pointer; }
.vol::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 16px; height: 16px;
  border-radius: 50%; background: var(--accent); border: 0; cursor: pointer; }
.vol::-moz-range-thumb { width: 16px; height: 16px; border-radius: 50%; background: var(--accent);
  border: 0; cursor: pointer; }

/* my active bets this round */
.my-bets { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.mybet { font-size: 12px; font-weight: 700; padding: 5px 9px; border-radius: 8px; background: #1a1726;
  color: #cdbcff; border: 1px solid #2b2440; font-variant-numeric: tabular-nums; }
.mybet.won { background: #10231a; color: var(--green-bright); border-color: #1d3a2a; }
.mybet.lost { background: #1c1417; color: #8a6b72; border-color: #2a1d22; }
.message { min-height: 16px; margin-top: 8px; font-size: 13px; text-align: center; color: var(--amber); }

/* players' bets list */
#players { background: var(--panel); border-radius: 14px; padding: 10px 12px 6px; }
.players-title { font-size: 12px; color: var(--hint); margin-bottom: 8px; font-weight: 600;
  display: flex; justify-content: space-between; }
.players-title .cnt { color: #c9ccd6; }
#player-list { list-style: none; margin: 0; padding: 0; max-height: 34vh; overflow-y: auto; }
#player-list li { display: flex; align-items: center; gap: 10px; padding: 7px 0;
  border-bottom: 1px solid var(--line); }
#player-list li:last-child { border-bottom: 0; }
.pl-av { flex: 0 0 auto; width: 26px; height: 26px; border-radius: 50%; display: grid;
  place-items: center; font-size: 12px; font-weight: 700; color: #fff; }
.pl-name { flex: 1 1 auto; min-width: 0; font-size: 13px; color: var(--text); font-weight: 600;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pl-stake { flex: 0 0 auto; font-size: 12px; color: var(--hint); font-variant-numeric: tabular-nums; }
.pl-tgt { flex: 0 0 auto; font-size: 12px; color: #6b7080; font-variant-numeric: tabular-nums; }
.pl-out { flex: 0 0 auto; font-size: 13px; font-weight: 700; min-width: 64px; text-align: right;
  font-variant-numeric: tabular-nums; color: var(--hint); }
.pl-out.won { color: var(--green-bright); }
.pl-out.lost { color: #6b7280; }
#player-list .empty { color: var(--hint); font-size: 12px; padding: 8px 0; justify-content: center; }

/* ---------- modal (fairness + history) ---------- */
.modal { position: fixed; inset: 0; background: rgba(0,0,0,.6); display: flex; align-items: center;
  justify-content: center; padding: 18px; z-index: 50; }
.modal-card { background: var(--panel); border-radius: 16px; width: 100%; max-width: 460px;
  max-height: 82vh; overflow-y: auto; }
.modal-head { display: flex; justify-content: space-between; align-items: center; padding: 14px 16px;
  border-bottom: 1px solid var(--line); font-weight: 700; }
.modal-close { background: transparent; border: 0; color: var(--hint); font-size: 18px; }
.modal-body { padding: 14px 16px; }
.fair-label { font-size: 11px; color: var(--hint); text-transform: uppercase; letter-spacing: .5px; margin: 12px 0 6px; }
.fair-label:first-child { margin-top: 0; }
.fair-code { display: block; font-size: 11px; color: #b9bdc9; word-break: break-all; background: #0e0e14;
  padding: 8px 10px; border-radius: 8px; }
.fair-kv { font-size: 12px; color: var(--hint); margin-top: 6px; }
.fair-kv .fair-code { display: inline-block; margin-top: 4px; }
.m-history { display: flex; flex-wrap: wrap; gap: 6px; }
.fair-note { font-size: 11px; color: var(--hint); margin-top: 14px; line-height: 1.5; }

/* ---------- trends modal (Shuffle "big road") ---------- */
.trend-grid { display: grid; gap: 4px; margin: 4px 0 12px; }
.trend-grid.mini { gap: 3px; width: 168px; flex: 0 0 auto; }
.tcell { aspect-ratio: 1; background: #14141c; border: 1px solid #1d1d27; border-radius: 6px;
  display: grid; place-items: center; }
.tcell.clickable { cursor: pointer; }
.tcell.clickable:active, .tcell.clickable:hover { border-color: #4a4a5a; }
.tdot { width: 60%; height: 60%; border-radius: 50%; }
.tdot.tstar { width: auto; height: auto; border-radius: 0; background: none !important;
  font-size: 13px; line-height: 1; }
.link-btn { display: block; width: 100%; text-align: center; background: transparent; border: 0;
  color: #9aa0ad; text-decoration: underline; font-size: 13px; padding: 9px; cursor: pointer; }
.link-btn:active { color: #fff; }
.trend-legend { display: grid; grid-template-columns: repeat(5, auto); gap: 9px 12px;
  margin: 6px 0 14px; justify-content: start; }
.leg { display: flex; align-items: center; gap: 6px; font-size: 12px; color: #c9ccd6; white-space: nowrap; }
.leg .tdot { width: 16px; height: 16px; flex: 0 0 auto; }
.leg .tdot.tstar { font-size: 15px; }
.trend-ex { display: flex; gap: 12px; align-items: flex-start; background: #0e0e14; border-radius: 10px;
  padding: 10px; margin-bottom: 10px; }
.ex-text { font-size: 12px; color: #d2d5dd; line-height: 1.5; }
.seq { margin-top: 6px; color: #8d93a0; font-weight: 600; }
.seq .s-green { color: var(--green-bright); } .seq .s-yellow { color: #f4c029; }
.seq .s-purple { color: #9b6cf0; } .seq .s-blue { color: #3b82f6; }

/* per-round detail (opened by clicking a result in the trends grid) */
.rd-card { width: 92px; height: 116px; margin: 6px auto 16px; border-radius: 14px; display: grid;
  place-items: center; font-size: 22px; font-weight: 800; font-variant-numeric: tabular-nums;
  box-shadow: 0 8px 24px rgba(0,0,0,.45); }
.rd-result { font-size: 22px; font-weight: 800; margin-bottom: 6px; font-variant-numeric: tabular-nums; }

/* «Мои ставки» list (last 20 bets + share) */
.mybets-status { font-size: 13px; color: var(--green-bright); min-height: 18px; margin-bottom: 8px;
  text-align: center; }
.mybets-list { list-style: none; margin: 0; padding: 0; max-height: 64vh; overflow-y: auto; }
.mb-row { display: flex; align-items: center; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--line); }
.mb-row:last-child { border-bottom: 0; }
.mb-res { flex: 0 0 auto; font-size: 13px; font-weight: 800; padding: 6px 9px; border-radius: 8px;
  font-variant-numeric: tabular-nums; min-width: 60px; text-align: center; }
.mb-info { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.mb-bet { font-size: 12px; color: var(--hint); font-variant-numeric: tabular-nums; }
.mb-out { font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--hint); }
.mb-out.won { color: var(--green-bright); }
.mb-out.lost { color: #6b7280; }
.mb-share { flex: 0 0 auto; padding: 8px 13px; font-size: 13px; font-weight: 700; border: 0;
  border-radius: 9px; background: var(--accent); color: #fff; cursor: pointer; }
.mb-share:active { background: var(--accent-press); }
.mb-empty { color: var(--hint); font-size: 13px; text-align: center; padding: 24px 0; }

.hidden { display: none; }

/* ---------- desktop (mouse), single-column window BEFORE the 2-column kicks in ----------
   Phones (pointer: coarse) are untouched — they look great as-is. On a desktop the default Mini App
   window is wider+shorter, so (a) the 460px cap left black side-gutters and (b) the tall reel pushed
   the bet panel (incl. the multiplier row) below the fold. Here we fill the width (no gutters) and
   shrink the reel so the whole bet panel is visible without scrolling. The reel adds cards to fill
   the extra width (the card pitch is capped in JS), it doesn't stretch. */
@media (hover: hover) and (pointer: fine) and (max-width: 719px) {
  #app { max-width: 100%; gap: 7px; }
  #stage { aspect-ratio: auto; height: 38vh; min-height: 170px; max-height: 340px; }
  .win-pop { width: 150px; }
  .win-mult { font-size: 26px; padding: 12px 10px; }
}

/* ---------- desktop / wide window: 2-column so the players list sits BESIDE the reel ---------- */
@media (min-width: 720px) {
  #app {
    max-width: min(96vw, 1280px);
    display: grid;
    column-gap: 14px;
    row-gap: 10px;
    /* narrow players list → the reel column gets the space → MORE cards. */
    grid-template-columns: 216px minmax(0, 1fr);
    /* the panel row is 1fr → it absorbs the extra height when the window grows taller, so the
       bottom is panel-coloured (and the controls re-centre) instead of leaving a black gap. */
    grid-template-rows: auto auto auto 1fr;
    grid-template-areas:
      "top     top"
      "players stage"
      "players bottom"
      "players panel";
  }
  #topbar { grid-area: top; }
  /* CAP the reel height (and let it shrink on short windows) so expanding the window taller gives
     the extra space to the bet panel — the reel no longer stretches into a huge empty canvas. */
  #stage { grid-area: stage; aspect-ratio: auto; height: clamp(300px, 44vh, 360px); max-height: none; }
  #bottombar { grid-area: bottom; }
  #panel { grid-area: panel; display: flex; flex-direction: column; justify-content: center; }
  #players { grid-area: players; min-height: 0; display: flex; flex-direction: column; padding: 8px 9px 4px; }
  #players #player-list { max-height: none; flex: 1 1 auto; min-height: 0; }
  /* tighter rows so name + stake + outcome fit the narrow column */
  #players .players-title { font-size: 11px; }
  #players #player-list li { gap: 6px; padding: 6px 0; }
  #players .pl-av { width: 20px; height: 20px; font-size: 10px; }
  #players .pl-name { font-size: 11px; }
  #players .pl-stake { font-size: 11px; }
  #players .pl-tgt { display: none; }     /* drop the @target — too wide for the 180px column */
  #players .pl-out { font-size: 11px; min-width: 0; }
}