/* /static_v2/bomba.css */
/* ===== TOKENS (общие, как в проекте) ===== */
:root{
  --color-primary:#0076FF; --color-accent:#8E58FF;
  --color-success:#32D583; --color-warning:#FFC107; --color-danger:#FF4D4F;

  --bg-canvas:#0B0E1A; --bg-surface:#12131A; --bg-elevated:#0F111A; --bg-card:#1A1C25;

  --text-primary:#fff; --text-secondary:#C7CBD1; --text-muted:#9AA0A6;

  --stroke:#3B3B3B; --divider:#2A2D36;

  --radius-lg:16px; --radius-md:12px; --radius-sm:8px; --radius-pill:100px;

  --shadow-sm:0 2px 8px rgba(0,0,0,.24); --shadow-md:0 8px 24px rgba(0,0,0,.32);

  --space-4:4px; --space-8:8px; --space-12:12px; --space-16:16px; --space-20:20px; --space-24:24px; --space-32:32px;

  --font-sans:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  --font-weight-bold:700; --font-weight-extra:800;

  --app-width:390px;
  --topbar-h:64px;
  --tabbar-h:57px;

  /* под референс секций/ползунка */
  --panel-bg:#202020;          /* фон секций (stats, bombs, bet) */
  --surface-2:#3B3B3B;         /* фон поля ввода/кнопок-монет */

  /* вспом. переменные для range */
  --pct:40%;                   /* процент положения ползунка (обновляется из JS) */
}

/* ===== Base ===== */
*{box-sizing:border-box}
html,body{height:100%}
body.bomba-page{
  margin:0;background:var(--bg-canvas);color:var(--text-primary);
  font-family:var(--font-sans); -webkit-user-select:none; user-select:none; overflow-x:hidden;
  -webkit-text-size-adjust:100%; touch-action:manipulation;
  padding-top:var(--topbar-h);
  padding-bottom:calc(20vh + var(--tabbar-h) + env(safe-area-inset-bottom,0px));
}
:focus-visible{outline:2px solid var(--color-primary);outline-offset:2px}
.l-shell{width:min(100% - 32px, var(--app-width));margin:0 auto;position:relative}

/* ===== Topbar ===== */
.c-topbar{
  position:fixed;inset:0 0 auto 0;height:var(--topbar-h);
  background:var(--bg-elevated);display:flex;align-items:center;justify-content:space-between;
  gap:var(--space-8);padding:0 var(--space-16);box-shadow:var(--shadow-sm);z-index:10;
  --balance-h:42px;
}
.c-topbar__logo .logo{height:24px;display:block}
.c-topbar__actions{display:flex;align-items:center;gap:10px}

.c-btn{display:inline-flex;align-items:center;justify-content:center;font-weight:var(--font-weight-bold);border-radius:9px;border:0;cursor:pointer;transition:.18s ease;line-height:1}
.c-btn--primary{height:35px;min-width:116px;padding:0 14px;background:var(--color-primary);color:#fff;font-size:16px}
.c-btn--primary:hover{filter:brightness(1.05)}
.c-btn--primary:active{transform:translateY(1px)}
.c-btn--plus{
  width:var(--balance-h);height:var(--balance-h);border-radius:12px;background:var(--color-primary);color:#fff;
  display:inline-flex;align-items:center;justify-content:center;
}
.c-btn--plus svg{display:block}
.c-btn--plus:active{transform:translateY(1px)}
.c-balance{
  display:flex;align-items:center;gap:8px;background:rgba(0,0,0,.25);
  border:1px solid rgba(255,255,255,.6);
  border-radius:10px;padding:6px 10px;height:var(--balance-h);
}
.c-balance .bal-icon{width:22px;height:22px}
.c-balance__value{min-width:48px;text-align:right;font-size:16px;font-weight:var(--font-weight-bold)}
.login-btn{height:35px;padding:0 14px;border-radius:9px;background:var(--color-primary);border:0;color:#fff;font-weight:var(--font-weight-bold)}

/* ===== Title ===== */
/* Заголовок — делаем flex, чтобы корректно выровнять кнопку по базовой линии */
.page-title{
  margin:14px 0 10px;
  text-align:center;                 /* визуальный центр сохраняем за счёт justify-content */
  font-size:36px;
  line-height:1.1;
  font-weight:var(--font-weight-extra);
  letter-spacing:.4px;

  display:flex;                      /* НОВОЕ */
  justify-content:center;            /* центрируем всю группу */
  align-items:baseline;              /* выравниваем по базовой линии текста */
  gap:12px;                          /* расстояние между текстом и кнопкой */
}
.page-title .muted{opacity:.9}
.page-title .accent{color:var(--color-primary)}

/* Кнопка звука: лёгкий «подъём» вверх через переменную-смещение */
.sound-toggle{
  --sz: 36px;
  --lift: -4px;                      /* <- при необходимости поднимите/опустите кнопку (например, -6px / -2px) */
  width: var(--sz); height: var(--sz);
  display:inline-flex; align-items:center; justify-content:center;
  border:1px solid rgba(255,255,255,.15);
  border-radius:10px; background:#1a1c24; color:#fff;
  cursor:pointer;
  transition:transform .12s ease, filter .2s ease, background .2s ease;
  margin-left:10px;
  transform: translateY(var(--lift));                     /* НОВОЕ: базовое смещение вверх */
}
.sound-toggle:hover{ transform: translateY(calc(var(--lift) - 1px)); filter:brightness(1.05); }
.sound-toggle:active{ transform: translateY(var(--lift)); }
.sound-toggle .sound-ico{ font-size:16px; line-height:1; }
.sound-toggle .on{ display:none; }
.sound-toggle.is-on .on{ display:inline; }
.sound-toggle.is-on .off{ display:none; }
/* При большом заголовке можно увеличить кнопку: */
/* .sound-toggle{ --sz: 40px; } */

/* ===== Mini bank line ===== */
.mini-bank{
  display:flex;align-items:center;justify-content:center;gap:10px;
  height:44px;border:1px solid var(--stroke);border-radius:12px;background:rgba(0,0,0,.35);
  margin-bottom:10px;
}
.mini-bank .plus{font-weight:700;letter-spacing:.3px}

/* ===== Board (вернул из старой версии) ===== */
.bomba-board{
  margin:10px 0 10px;
  display:grid;
  grid-template-columns:repeat(5, 1fr);
  gap:10px;
  border:1px solid var(--stroke);
  border-radius:16px;
  padding:12px;
  background:linear-gradient(180deg, rgba(6,8,16,.92), rgba(6,8,16,.86));
  box-shadow:var(--shadow-sm);
}
.cell{
  position:relative;display:block;width:100%;aspect-ratio:1/1;
  border-radius:14px;border:1px solid rgba(255,255,255,.08);
  background:#0E111A;cursor:pointer;transition:transform .12s ease, box-shadow .12s ease, background .18s, filter .18s;
  overflow:hidden;
}
.cell:hover{transform:translateY(-1px);box-shadow:0 8px 24px rgba(0,0,0,.25)}
.cell:disabled{cursor:default;opacity:.9}
.cell.--idle{background:#0E111A}
.cell.--opened{background:linear-gradient(180deg, rgba(5,10,16,.8), rgba(5,10,16,.7))}
.cell.--coin{background:linear-gradient(180deg, rgba(24,85,255,.22), rgba(24,85,255,.08));border-color:rgba(24,85,255,.45)}
.cell.--bomb{background:linear-gradient(180deg, rgba(255,67,67,.28), rgba(255,67,67,.1));border-color:rgba(255,67,67,.55)}
/* «переливающаяся» подсветка под монетой (по референсу) */
.cell.--coin::before{
  content:"";position:absolute;inset:10% 10% 10% 10%;border-radius:12px;
  background:
    radial-gradient(35% 35% at 50% 35%, rgba(255,198,97,.38), transparent 70%),
    conic-gradient(from 0deg, rgba(255,220,130,.18), rgba(255,165,64,.22), rgba(255,220,130,.18));
  filter:blur(10px) saturate(120%); animation:coinGlow 3.2s linear infinite; z-index:0;
}
@keyframes coinGlow{from{transform:rotate(0)} to{transform:rotate(360deg)}}
.cell .cell-ico{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);pointer-events:none;
  filter:drop-shadow(0 2px 6px rgba(0,0,0,.35)); z-index:2;
}
/* авто‑раскрытые (не игроком) — затемняем */
.cell.auto-revealed::after{content:"";position:absolute;inset:0;border-radius:14px;background:rgba(0,0,0,.45);z-index:1}

/* ===== Stats bar ===== */
.stats-bar{
  display:grid;grid-template-columns:repeat(3,1fr);gap:8px;
  border:1px solid #2A2A2A;border-radius:16px;background:var(--panel-bg);padding:10px 12px;box-shadow:var(--shadow-sm);
  margin-bottom:10px;
}
.stat{text-align:center}
.stat__value{font-weight:800;font-size:18px}
.stat__label{opacity:.85;font-size:12px}

/* ===== Bombs control ===== */
.bombs-control{
  border:1px solid #2A2A2A;border-radius:16px;background:var(--panel-bg);padding:12px;box-shadow:var(--shadow-sm);
  margin-bottom:10px;
}
.bombs-control__label{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:10px}
.bombs-count{font-size:16px}

/* Слева бомба и число, справа — слайдер */
.bombs-row{display:flex;align-items:center;gap:12px}
.bombs-left{display:flex;align-items:center;gap:8px;color:#E9E9E9;min-width:46px}
.bombs-left .ico-bomb{width:18px;height:18px;display:block;opacity:.9}

/* Обёртка для собственого SVG‑ползунка */
.range-wrap{position:relative;flex:1 1 auto;height:36px}
.range{position:absolute;inset:50% 0 auto 0;transform:translateY(-50%);
  -webkit-appearance:none;appearance:none;width:100%;height:10px;border-radius:999px;border:1px solid #2E2E2E;outline:none;
  background:linear-gradient(90deg, #1B6BFF 0 var(--pct), #FFFFFF var(--pct));
}
/* прячем нативный «thumb», оставляя область тапа */
.range::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:34px;height:34px;border:0;background:transparent;opacity:0;margin-top:-12px}
.range::-moz-range-thumb{width:34px;height:34px;border:0;background:transparent;opacity:0}

/* наш SVG‑ползунок поверх инпута */
.range-thumb{
  position:absolute;left:var(--pct);top:50%;transform:translate(-50%,-50%);
  width:34px;height:34px;pointer-events:none;filter:drop-shadow(0 6px 14px rgba(0,0,0,.35))
}

/* ===== Bet & CTA ===== */
.bet-panel{
  border:1px solid #2A2A2A;border-radius:16px;background:var(--panel-bg);padding:10px;box-shadow:var(--shadow-sm);
  display:grid;
  grid-template-columns:minmax(0, 55%) minmax(0, 45%);
  grid-template-rows:56px auto;
  grid-template-areas:"bet cta" "quick cta";
  column-gap:10px; row-gap:8px; align-items:stretch;
}

/* Поле ставки — фон #3B3B3B, «−/＋» без фона, компактнее и ближе */
.bet-field{
  grid-area:bet; position:relative;display:flex;align-items:center;gap:2px;
  background:var(--surface-2);border:1px solid #4A4A4A;border-radius:14px;height:56px;padding:0 10px;min-width:0;
}
.bet-input{order:1;flex:1 1 auto;background:transparent;border:0;color:#fff;font-size:18px;outline:none;min-width:0}
.bet-input::-webkit-outer-spin-button, .bet-input::-webkit-inner-spin-button{appearance:none;margin:0}

/* 40% уже и ближе друг к другу справа */
.bet-btn{
  width:26px;height:36px;border-radius:8px;border:0;background:transparent;color:#fff;
  font-size:22px;font-weight:800;line-height:1;display:inline-flex;align-items:center;justify-content:center;
}
#betMinus{order:2;margin-left:auto}
#betPlus{order:3;margin-left:2px}

.bet-quick{grid-area:quick;display:grid;grid-template-columns:repeat(3, 1fr);gap:8px}
.chip{height:44px;border-radius:12px;border:1px solid var(--stroke);background:#2E2E2E;color:#fff;font-weight:700;width:100%}
.chip:active{transform:translateY(1px)}
.cta{grid-area:cta;display:flex;align-items:stretch}
.start-btn{
  width:100%;height:100%;min-height:56px;border-radius:14px;font-size:18px;
  display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:0 18px
}
.start-btn .cashout-text{display:none}

/* режим игры: кнопка превращается в "Забрать" */
.is-playing .start-btn{background:#21B573}
.is-playing .start-btn .start-text{display:none}
.is-playing .start-btn .cashout-text{display:inline}

/* ===== Невидимая «прокладка» под таббар ===== */
.page-end-spacer{height:20vh;min-height:var(--tabbar-h)}

/* ===== Toast (под референс) ===== */
#toast-container{
  position:fixed;top:calc(var(--topbar-h) + 8px);left:50%;transform:translateX(-50%);
  width:min(100% - 32px, var(--app-width));max-width:var(--app-width);z-index:40;
}
.toast{
  width:100%;border:1px solid transparent;color:#fff;padding:12px 16px;border-radius:14px;margin-top:10px;
  box-shadow:0 6px 16px rgba(0,0,0,.35);display:flex;align-items:center;gap:10px;position:relative;transition:opacity .25s ease
}
.toast::before{
  content:"";flex:0 0 22px;width:22px;height:22px;display:inline-block;background-position:center;background-repeat:no-repeat;background-size:22px 22px;opacity:.95
}
.toast-info{background:#1A2A46;border-color:#2E4A80}
.toast-info::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 24 24' fill='none' stroke='%23FFFFFF' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cline x1='12' y1='16' x2='12' y2='12'/%3E%3Cline x1='12' y1='8' x2='12' y2='8'/%3E%3C/svg%3E")}
.toast-success{background:#356F35;border-color:#75B67C}
.toast-success::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 24 24' fill='none' stroke='%23FFFFFF' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E")}
.toast-error{background:#562128;border-color:#A7444D}
.toast-error::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 24 24' fill='none' stroke='%23FFFFFF' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='18' y1='6' x2='6' y2='18'/%3E%3Cline x1='6' y1='6' x2='18' y2='18'/%3E%3C/svg%3E")}

/* ===== Tabbar ===== */
.c-tabbar{
  position:fixed;left:0;right:0;bottom:0;width:100%;
  height:var(--tabbar-h);background:#020410;border-top:1px solid var(--stroke);
  display:flex;align-items:center;justify-content:space-around;z-index:9
}
.c-tabbar__item{
  color:#fff;text-decoration:none;display:flex;flex-direction:column;align-items:center;gap:4px;
  font-size:10px;font-weight:300;opacity:.95
}
.c-tabbar__item.is-active{opacity:1}
.c-tabbar__item svg{display:block;width:22px;height:22px;transform:translateY(1px)}
.c-tabbar__item svg *, .c-tabbar__item svg path, .c-tabbar__item svg line, .c-tabbar__item svg circle, .c-tabbar__item svg rect{
  stroke-width:2 !important; vector-effect:non-scaling-stroke
}
@media (min-width:400px){ .c-tabbar__item svg{width:24px;height:24px} }