/* ============================================================
   VRTH — общий дизайн-кит казино-игр. Подключается из site_base.html.
   Все компоненты тонируются через --acc (задаётся в {% block accent %}).
   Префикс .g- = game component.
   ============================================================ */

/* ---------- шапка игры ---------- */
.g-head { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; margin-bottom:14px; }
.g-title { font-size:1.7rem; font-weight:900; line-height:1.1;
  background:linear-gradient(90deg, var(--acc), #a855f7, var(--acc));
  background-size:200%; -webkit-background-clip:text; background-clip:text; color:transparent;
  animation:gShim 3s linear infinite;
  filter:drop-shadow(0 0 14px color-mix(in srgb, var(--acc) 45%, transparent)); }
@keyframes gShim { to { background-position:200%; } }
.g-sub { font-size:.72rem; color:#6b7794; font-weight:700; margin-top:2px; }
.g-sub b { color:var(--acc); }

.g-audio { display:flex; gap:8px; flex-shrink:0; }
.g-atog { width:40px; height:40px; border-radius:11px;
  background:#0a0e1ccc; border:1px solid color-mix(in srgb, var(--acc) 35%, transparent);
  color:var(--acc); font-size:1rem; cursor:pointer; display:flex; align-items:center; justify-content:center;
  transition:.15s; position:relative; }
.g-atog:hover { background:color-mix(in srgb, var(--acc) 12%, transparent); transform:translateY(-1px); }
.g-atog.off { color:#475569; border-color:#ffffff14; }
.g-atog.off::after { content:''; position:absolute; left:7px; right:7px; top:50%; height:2px;
  background:#ef4444; transform:rotate(-32deg); border-radius:2px; }

/* ---------- статистика сессии ---------- */
.g-stats { display:grid; grid-template-columns:repeat(4,1fr); gap:7px; margin:12px 0 4px; }
.g-stat { background:#0a0e1aa8; border:1px solid #ffffff10; border-radius:11px; padding:8px 6px; text-align:center; }
.g-stat .k { font-size:.56rem; letter-spacing:.8px; color:#64748b; text-transform:uppercase; font-weight:700; }
.g-stat .v { font-size:.92rem; font-weight:900; color:#cbd5e1; margin-top:2px; }
.g-stat .v.acc { color:var(--acc); }
.g-stat .v.up  { color:#22c55e; }
.g-stat .v.dn  { color:#ef4444; }

/* ---------- ставки ---------- */
.g-bets { display:flex; gap:6px; flex-wrap:wrap; align-items:center; margin:10px 0 9px; }
.g-bets label { font-size:.8rem; color:#64748b; font-weight:700; }
.g-qb { background:#0d1322; border:1px solid color-mix(in srgb, var(--acc) 30%, transparent);
  color:var(--acc); font-weight:800; font-size:.74rem; padding:6px 10px; border-radius:8px; cursor:pointer; transition:.14s; }
.g-qb:hover { background:color-mix(in srgb, var(--acc) 12%, transparent); }
.g-qb.active { background:var(--acc); color:#0a0e1a; border-color:var(--acc); }
.g-betinput { background:#0d1322; border:1px solid color-mix(in srgb, var(--acc) 30%, transparent);
  color:#fff; font-weight:700; padding:7px 11px; border-radius:9px; width:108px; }
.g-betinput:focus-visible { outline:2px solid var(--acc); outline-offset:1px; }

/* главная кнопка действия */
.g-go { width:100%; margin-top:4px;
  background:linear-gradient(90deg, color-mix(in srgb, var(--acc) 60%, #000), var(--acc), #7c3aed);
  background-size:200%; color:#04121a; border:none; font-size:1.05rem; font-weight:900;
  padding:14px; border-radius:14px; cursor:pointer; letter-spacing:.5px; transition:.2s;
  box-shadow:0 6px 26px color-mix(in srgb, var(--acc) 35%, transparent); }
.g-go:hover:not(:disabled) { background-position:100%; transform:translateY(-1px); filter:brightness(1.07); }
.g-go:disabled { opacity:.45; cursor:not-allowed; }

.g-bal { text-align:center; margin-top:10px; font-size:.84rem; color:#64748b; }
.g-bal b { color:var(--acc); transition:color .2s; }
.g-info { text-align:center; font-size:.74rem; color:#64748b; margin-top:6px; }

/* подсветка баланса при изменении */
.bal-flash { animation:balFlash .7s ease-out; }
@keyframes balFlash {
  0%   { color:#fff; text-shadow:0 0 18px color-mix(in srgb, var(--acc) 80%, transparent); transform:scale(1.18); display:inline-block; }
  100% { color:var(--acc); text-shadow:none; transform:scale(1); }
}

/* ---------- тосты ---------- */
.g-toastwrap { position:fixed; left:50%; bottom:24px; transform:translateX(-50%);
  z-index:9999; display:flex; flex-direction:column; gap:8px; align-items:center; pointer-events:none; }
.g-toast { display:flex; align-items:center; gap:9px; max-width:88vw;
  background:#0b1020f2; border:1px solid #ffffff1a; color:#e7eeff;
  font-weight:700; font-size:.86rem; padding:11px 16px; border-radius:13px;
  box-shadow:0 10px 30px #000a, inset 0 1px 0 #ffffff12;
  opacity:0; transform:translateY(14px) scale(.96); transition:.28s cubic-bezier(.2,.7,.2,1); }
.g-toast.show { opacity:1; transform:translateY(0) scale(1); }
.g-toast .g-tico { width:22px; height:22px; border-radius:50%; display:grid; place-items:center;
  font-size:.74rem; flex-shrink:0; }
.g-toast.ok  { border-color:#22c55e55; } .g-toast.ok  .g-tico { background:#22c55e22; color:#22c55e; }
.g-toast.err { border-color:#ef444455; } .g-toast.err .g-tico { background:#ef444422; color:#ef4444; }
.g-toast.win { border-color:#f5d02066; } .g-toast.win .g-tico { background:#f5d02022; color:#f5d020; }
.g-toast.info .g-tico { background:#ffffff14; color:#9fb2d8; }

/* ---------- мобилка ---------- */
@media (max-width:560px) {
  .g-title { font-size:1.42rem; }
  .g-atog { width:36px; height:36px; }
  .g-stats { gap:5px; }
  .g-stat .v { font-size:.84rem; }
  .g-qb { padding:7px 11px; font-size:.78rem; }   /* крупнее тап-таргет */
  .g-betinput { flex:1; width:auto; min-width:84px; }
  .g-go { padding:15px; font-size:1.08rem; }       /* удобнее палец */
}

/* уважение к настройкам доступности */
@media (prefers-reduced-motion:reduce) {
  .g-title { animation:none; }
  .g-toast { transition-duration:.01ms; }
  .bal-flash { animation-duration:.01ms; }
}