/* Цвет кнопок: голубой вместо мятного. Подключается последним и переопределяет islands.css / admin.css / styles.css.
   Чтобы сменить оттенок — меняйте переменные ниже. */
:root {
  --btn-top: #9adbff;       /* светлый верх градиента */
  --btn-mid: #3aa6f2;       /* основной голубой */
  --btn-bottom: #1d86d8;    /* низ градиента */
  --btn-border: #c3e8ff;
  --btn-text: #062a47;
  --btn-edge: #0f63a8;      /* нижняя «толщина» кнопки */
  --btn-shine: #e6f5ffaa;   /* блик сверху */
  --accent: #7fd0ff;        /* активная вкладка, индикаторы */
  --chip-on: #17507a;       /* выбранная ставка / вкладка */
  --chip-on-border: #7fcaff;
}

/* «Начать игру», «Забрать», «Играть снова», «Оплатить» и другие основные кнопки */
#screen-game .btn-primary, #screen-game .btn-cashout, .btn-primary, .btn-pay {
  background:linear-gradient(var(--btn-top), var(--btn-mid) 60%, var(--btn-bottom));
  border:1px solid var(--btn-border);
  color:var(--btn-text);
  box-shadow:inset 0 2px var(--btn-shine), 0 3px var(--btn-edge);
}

/* Выбранная ставка */
#screen-game .bet-chips .chip.active { background:var(--chip-on); border-color:var(--chip-on-border); color:#fff; }

/* Нижнее меню: активная вкладка */
.tabbar button.active { color:var(--accent); }
.tabbar button.active::after { background:var(--accent); }

/* Переключатели (профиль, админка) */
.seg button.active { background:var(--chip-on); color:#dff2ff; }
#screen-admin .seg button.active { background:linear-gradient(var(--btn-top), var(--btn-mid)); color:var(--btn-text); }

/* Вкладки способов пополнения */
.pay-tab.active { background:linear-gradient(var(--btn-top), var(--btn-mid) 60%, var(--btn-bottom)); color:var(--btn-text); box-shadow:0 4px 16px #3aa6f24d; }

/* «+» у баланса */
.balance-pill .plus { background:linear-gradient(var(--btn-mid), var(--btn-bottom)); color:#fff; }

/* ── Фоны панелей: тёмно-синие вместо тёмно-зелёных ── */
:root {
  --panel-top: #163b61f2;
  --panel-bottom: #0a2442f2;
  --panel-border: #7fb4e699;
  --panel-inner-border: #6f9fcf55;
  --field-bg: #173b5e;        /* кнопки сумм, поле ставки */
  --field-border: #44739f;
  --field-text: #d9eeff;
}

#screen-game .stats-row {
  background:linear-gradient(var(--panel-top), var(--panel-bottom));
  border-color:var(--panel-border);
  box-shadow:0 3px 6px #04162b55, inset 0 1px #dff0ff22;
}
#screen-game .stat-pill { border-color:var(--panel-inner-border); }
#screen-game .bottom-panel { background:var(--panel-bottom); border-color:var(--panel-border); }
#screen-game .bet-chips .chip { background:var(--field-bg); border-color:var(--field-border); color:var(--field-text); }
.custom-bet input { background:#0a2238; border-color:var(--field-border); color:#eef8ff; }

.tabbar { background:linear-gradient(#143a5f, #081d35); border-color:#5f90c2; box-shadow:0 -4px 14px #04203d44; }
.header { background:linear-gradient(#051c3377, transparent); }
.balance-pill { background:linear-gradient(#1c4a75, #0a2442); border-color:#7fb4e6; box-shadow:0 3px 8px #04162b55, inset 0 1px #dff0ff44; }

/* Рефералы — та же голубая палитра, что у игрового интерфейса. */
#screen-ref { background:linear-gradient(#0b2f50eb, #071e38e8); }
#screen-ref .card, #screen-ref .stat-card, #screen-ref .row {
  background:linear-gradient(var(--panel-top), var(--panel-bottom));
  border-color:var(--panel-border);
  box-shadow:inset 0 1px #dff0ff22, 0 4px 12px #04162b33;
}
#screen-ref .title, #screen-ref .big { color:#e6f5ff; }
#screen-ref .field-label, #screen-ref .s-label { color:#9bd7ff; }
#screen-ref .hero-text { color:#e2f2ff; }
#screen-ref .ref-link { background:#08233e; color:#8dddff; border:1px solid var(--field-border); }
#screen-ref .btn-ghost { background:#173b5e; border-color:#7fb4e6; color:#dff2ff; }
#screen-ref .btn-ghost:hover { background:#20517e; }

/* Общая голубая тема всех разделов и всплывающих окон. */
:root { --dark:#123859; --darker:#071d35; --panel:#163b61; --line:#527fa8; --text:#edf7ff; --muted:#abcde8; --faint:#86afd0; }
html, body { background:#071d35; }
.app { background:linear-gradient(#126caa22,#08294d55); background-color:#0a3153; }
.screen:not(#screen-game), #screen-ref, #screen-admin {
  background:radial-gradient(ellipse at top right,#245f88,transparent 65%),linear-gradient(160deg,#103b60,#081f3b);
}
.card,.stat-card,.method,.row,.hero-num,.pl,.chart-card,.rcard,
#screen-admin .row,#screen-admin .pl,#screen-admin .chart-card,#screen-admin .stat-card,
#playerSheet .row,#playerSheet .stat-card,#playerSheet .card,#screen-admin .hero-num {
  background:linear-gradient(var(--panel-top),var(--panel-bottom)); border-color:var(--panel-border);
  box-shadow:inset 0 1px #dff0ff22,0 4px 12px #04162b33;
}
.admin-hero,#playerSheet .profile-head { background:linear-gradient(135deg,#236294,#103555); border-color:#7fb4e699; }
.sheet,#playerSheet { background:linear-gradient(150deg,#17476d,#081f3b); }
.sheet-head,#playerSheet .sheet-head { background:#163e64; border-color:#527fa8; }
.seg,#screen-admin .seg { background:#0a2947; border-color:#527fa8; }
.search,.amount-input,.select,.input,.ref-link,.btn-ghost,
#screen-admin .search,#screen-admin .select,#screen-admin .chip,#playerSheet .input,#playerSheet .sheet-close {
  background:#123555; border-color:#527fa8; color:#dff2ff;
}
#screen-admin .chip.active { background:#216698; border-color:#9bd7ff; color:#fff; }
#screen-admin .empty,#playerSheet .empty { background:#10375988; border-color:#527fa8; color:#abcde8; }
.title,.admin-hero h2 { color:#e6f5ff; }
.field-label,.s-label,.tabbar button { color:#abcde8; }
.level-num { background:linear-gradient(135deg,#4482ac,#193f62); border-color:#8dc5eb; box-shadow:0 3px #0c2945,0 5px 8px #06243c66; }
.cell-prob,.cell.gold .cell-prob { background:#0d355577; }

/* Keep the win counter stable and avoid repainting a blurred animated board. */
#rAmount, #rMult { font-variant-numeric:tabular-nums; }
#rAmount > span { display:inline-block; white-space:nowrap; }
.overlay { backdrop-filter:none; background:rgba(3,16,32,.88); }
body:has(.overlay.on) .app *, body:has(.overlay.on) .app *::before, body:has(.overlay.on) .app *::after { animation-play-state:paused !important; }
