/* Shared app palette and chrome. Game artwork keeps its own palette. */
:root {
  color-scheme:dark;
  --gold:#ffd700; --amber:#ff8c00; --dark:#080a0f; --darker:#06070b;
  --green:#2ec4b6; --red:#e63946; --stone:#4a7c9e;
  --text:#f2f4f8; --muted:#b3bac8; --faint:#8d97a8;
  --panel:#151820; --line:#2d313d; --accent:#70c4ff;
  --btn-top:#0978c3; --btn-mid:#086eb7; --btn-bottom:#0965ac;
  --btn-border:#409bdf; --btn-text:#fff; --btn-edge:#094672; --btn-shine:#ffffff33;
  --chip-on:#112b42; --chip-on-border:#2979b4;
  --panel-top:#1b1f2a; --panel-bottom:#11141c; --panel-border:var(--line);
  --panel-inner-border:var(--line); --field-bg:#1a1d26; --field-border:#343946; --field-text:var(--text);
  --control-fill:linear-gradient(180deg,#1c2029,#14171e);
  --active-fill:linear-gradient(180deg,#15334e,#101f30);
  --primary-fill:linear-gradient(180deg,var(--btn-top),var(--btn-bottom));
  --primary-hover:linear-gradient(180deg,#086db5,#095b9c);
  --hero-fill:radial-gradient(ellipse at 92% 0%,#1c3854,transparent 66%), linear-gradient(140deg,var(--panel-top),var(--panel-bottom));
}
html, body { background:var(--dark) !important; color:var(--text); }
body::before, body::after { display:none; }
.app, .app.game-view, .app:not(.game-view),
.app .screen, .app:not(.game-view) .screen:not(#screen-game) {
  background:var(--dark) !important;
}
.app { border-inline-color:var(--dark); }
.app .title { color:var(--text); }
.app .header {
  gap:8px; padding:5px 10px;
  background:var(--dark) !important; border-bottom:0 !important;
}
.app #screen-game { background:transparent !important; }
.app .header .logo {
  width:auto; height:auto; background:none; color:var(--text);
  font:900 26px/1 var(--font-app); letter-spacing:-.045em;
  text-shadow:none; filter:none;
}
.app .header .logo span { color:#ffd15b; }
.header-actions { display:flex; align-items:center; gap:5px; min-width:0; }
.header-balance {
  display:flex; align-items:center; gap:5px; min-width:0; min-height:40px; padding:4px 9px 4px 5px;
  border:1px solid var(--field-border); border-radius:999px; background:var(--panel-bottom);
  color:var(--text); font-size:13px; font-weight:900;
}
.header-balance img { flex:none; width:22px; height:22px; }
.header-balance span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.app .tabbar {
  bottom:calc(8px + env(safe-area-inset-bottom));
  width:calc(100% - 20px); max-width:460px; gap:2px; padding:4px;
  background:linear-gradient(180deg,#161820,#0a0c12) !important;
  border:1px solid var(--line) !important; border-radius:999px !important;
  box-shadow:0 6px 20px #000a !important;
}
.app .card, .app .stat-card, .app .row, .app .mines-panel, .app .mines-stats,
.app .bottom-panel, .app .stats-row, .app .tb-panel, .app .tr-panel, .app .rd-panel,
.app .admin-hero, .sheet, .rcard {
  background:var(--panel) !important; border:1px solid var(--line) !important;
  border-radius:14px !important; box-shadow:0 4px 12px #00000018 !important;
}
.app .live-strip, .app .seg, .app .search, .app .ref-link,
.app .tb-box, .app .m-stepper { background:var(--panel-bottom) !important; border-color:var(--line) !important; }
.app input, .app select, .sheet input, .sheet select {
  background:var(--field-bg) !important; color:var(--field-text) !important; border-color:var(--field-border) !important;
  border-radius:10px; accent-color:var(--accent);
}
.app .tb-box input { background:transparent !important; border-radius:0; }
.app .amount-input { background:var(--field-bg) !important; border:1px solid var(--field-border) !important; }
.app .amount-input input { background:transparent !important; border:0 !important; border-radius:0; }
body button:where(:not(.game-card, .tile, .cell)), body .btn-primary, body .btn-cashout {
  background:var(--control-fill) !important; color:var(--text) !important; border:1px solid var(--field-border) !important;
  border-radius:14px !important;   /* все кнопки скруглённые */ box-shadow:none !important; text-shadow:none !important;
  font-weight:800; transition:background .16s ease,border-color .16s ease,opacity .16s ease;
}
body button:where(:not(.game-card, .tile, .cell, :disabled)):hover { background:var(--panel-top) !important; border-color:var(--chip-on-border) !important; }
body button:where(:not(.game-card, .tile, .cell, :disabled)):active { background:var(--chip-on) !important; }
body button:focus-visible, body input:focus-visible, body select:focus-visible { outline:2px solid var(--accent); outline-offset:3px; }
body button:disabled:not(.cell):not(.tile) { opacity:.4 !important; cursor:not-allowed; }
body button.btn-primary, body button.btn-cashout, body button.btn-pay,
body button.m-action, body button.tb-go, body button.tb-cash:not(:disabled),
body button.tr-build, body button.tr-cash:not(:disabled), body button.bj-act, body button.rd-go {
  background:var(--primary-fill) !important; color:var(--btn-text) !important; border-color:var(--btn-border) !important;
}
body button.btn-primary:hover:not(:disabled), body button.btn-cashout:hover:not(:disabled),
body button.m-action:hover:not(:disabled), body button.tb-go:hover:not(:disabled), body button.bj-act:hover:not(:disabled) {
  background:var(--primary-hover) !important; color:var(--btn-text) !important;
}
body button.active:where(:not(.game-card, .tile, .cell)), body button[aria-pressed="true"] {
  background:var(--active-fill) !important; color:#fff !important; border-color:var(--chip-on-border) !important;
}
.app .header button.header-deposit {
  flex:none; min-height:40px; padding:0 11px; white-space:nowrap; font-size:13px; font-weight:900;
  background:var(--primary-fill) !important; color:var(--btn-text) !important;
  border-color:var(--btn-border) !important; border-radius:999px !important;
  box-shadow:inset 0 1px #ffffff40, 0 3px 14px #2298e340 !important;
}
.app .header button.header-deposit:hover,
.app .header button.header-deposit:active {
  background:var(--primary-hover) !important; border-color:var(--accent) !important;
}
.app .tabbar button {
  height:calc(var(--tabbar-h) - 16px); gap:3px;
  border-color:transparent !important; border-radius:999px !important;
  background:transparent !important; color:var(--muted) !important;
}
.app .tabbar button span { width:18px; height:18px; filter:none; }
.app .tabbar button:hover:not(.active) { background:#ffffff0d !important; color:var(--text) !important; }
.app .tabbar button.active { background:var(--active-fill) !important; color:var(--accent) !important; border-color:var(--chip-on-border) !important; }
.app .tabbar button.active::after { content:none; }
.tb-go b, .tb-go small, .bj-act span { color:inherit !important; text-shadow:none !important; }
.app .game-card { background:linear-gradient(125deg,#363636,#262626) !important; border:1px solid #505050 !important; border-radius:14px !important; box-shadow:none !important; overflow:clip !important; clip-path:inset(0 round 14px); min-width:0; width:100%; }
.app .gc-title, .app .gc-sub, .app .gc-meta { display:block; max-width:74% !important; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
.app .gc-badge, .app .gc-meta { background:#ffffff12 !important; color:#ddd !important; box-shadow:none !important; }
.app .game-card:hover { border-color:#888 !important; }
.app .s-value, .app .big, .app .gold, .app .s-label, .app .field-label { color:#e4e4e4 !important; text-shadow:none !important; }
.app .pl-board {
  background:
    linear-gradient(90deg,#9aaed117 1px,transparent 1px) 50% 0 / 18px 18px,
    linear-gradient(#9aaed117 1px,transparent 1px) 50% 0 / 18px 18px,
    radial-gradient(ellipse at 50% 22%, #1a3a55 0%, transparent 65%),
    linear-gradient(155deg,var(--panel-top),var(--panel-bottom) 80%);
  border:1px solid var(--line); border-radius:19px;
  box-shadow:inset 0 1px #ffffff0c, 0 8px 18px #0004;
}
.app .pl-glow { background:radial-gradient(circle, #72b7f326, transparent 70%); }
.app .pl-peg {
  background:radial-gradient(circle at 32% 28%,#d8ecff,#7eb2d8 60%,#49759c);
  box-shadow:0 1px 3px #050a12aa;
  transition-property:transform;
}
.app .pl-peg.hit { background:#e4f5ff; box-shadow:0 0 7px #78caffaa; }
.app .pl-ball {
  background:radial-gradient(circle at 32% 28%, #fff8d4, #ffd469 36%, #d87b24 78%);
  box-shadow:0 0 6px #ffd46980, 0 2px 4px #0008;
}
.app .b-hot { --pl-tone:#ed8095; }
.app .b-high { --pl-tone:#edaa71; }
.app .b-mid { --pl-tone:#e7c978; }
.app .b-low { --pl-tone:#7dd9bc; }
.app .b-loss { --pl-tone:#83b8ee; }
.app :is(.pl-bin,.pl-res) {
  background:linear-gradient(180deg,color-mix(in srgb,var(--pl-tone) 28%,var(--panel)),var(--panel-bottom));
  color:var(--text); border:1px solid color-mix(in srgb,var(--pl-tone) 48%,var(--line));
  box-shadow:inset 0 1px #ffffff14; text-shadow:none; font-variant-numeric:tabular-nums;
}
.app .pl-bin { border-radius:6px; font-size:clamp(7px,2.15vw,9px); }
.pl-bin-compact { transform:scaleX(.84); }
.app .pl-bin.hit { border-color:var(--pl-tone); }
.app .crash-sky { background:#070d18 url('assets/games-v1/sky.jpg?v=1') center / cover no-repeat !important; border-color:#20354b !important; }
.app .tile:not(.gem):not(.boom) { background:#303030; border-color:#494949; }
.app .m-step { background:#303030; border-color:#505050; color:#ddd; }
.app .m-step.next { background:#505050; border-color:#aaa; color:#fff; }
.app .tb-mult, .app .tb-rung b, .app .tb-sub { background:#292929ed !important; border-color:#8a8a8a !important; color:#eee !important; text-shadow:0 2px #0005 !important; box-shadow:0 3px 8px #0003 !important; }
.app .tb-rung.next b { background:#555 !important; border-color:#eee !important; }
.app .tb-rung.done b { background:#3b3b3b !important; }
@media(prefers-reduced-motion:reduce) { body button { transition:none !important; } }
/* Mines: stone on closed tiles; gem and bomb paint on the tile, old SVG hidden. */
.app #screen-mines .tile:not(.gem):not(.boom):not(.dim) {
  background: url('assets/games-v1/mines-tile.png?v=2') center / cover no-repeat !important;
  border-color: #6b5344 !important;
  box-shadow: none !important;
  overflow: hidden;
}
.app #screen-mines .tile.gem,
.app #screen-mines .tile.dim:has(use[href="#i-gem"]) {
  background: #17364d url('assets/games-v1/mines-gem.png?v=2') center / 78% no-repeat !important;
}
.app #screen-mines .tile.boom,
.app #screen-mines .tile.dim:has(use[href="#i-bomb"]) {
  background: #643344 url('assets/games-v1/mines-bomb.png?v=2') center / 88% no-repeat !important;
}
.app #screen-mines .tile.gem .ico,
.app #screen-mines .tile.boom .ico,
.app #screen-mines .tile.dim .ico {
  visibility: hidden !important;
  opacity: 0 !important;
}

/* Plinko: ячейки ярче — насыщенный цвет, светлая рамка, лёгкое свечение */
.app .pl-bin {
  background:linear-gradient(180deg, color-mix(in srgb,var(--pl-tone) 92%,#fff), color-mix(in srgb,var(--pl-tone) 72%,#000)) !important;
  border:1px solid color-mix(in srgb,var(--pl-tone) 55%,#fff) !important;
  color:#1b1226 !important; font-weight:900; text-shadow:0 1px 0 #ffffff55 !important;
  box-shadow:inset 0 1px #ffffff66, inset 0 -2px #0000002e, 0 0 10px color-mix(in srgb,var(--pl-tone) 45%,transparent) !important;
}
.app .pl-bin.hit { filter:brightness(1.2) saturate(1.15); box-shadow:inset 0 1px #fff8, 0 0 16px var(--pl-tone) !important; }

/* Plinko: лента последних результатов — в цвет ячеек, новый результат крупнее, справа плавное затухание */
.app .pl-recent {
  display:flex; align-items:center; gap:5px; min-height:30px; margin:2px 0 8px; padding:3px 4px;
  overflow:hidden; border-radius:12px; background:color-mix(in srgb,var(--panel) 70%,transparent);
  border:1px solid var(--line);
  -webkit-mask-image:linear-gradient(90deg,#000 78%,transparent); mask-image:linear-gradient(90deg,#000 78%,transparent);
}
.app .pl-recent:empty { display:none; }
.app .pl-res {
  flex:0 0 auto; min-width:40px; padding:3px 7px; border-radius:8px; text-align:center;
  font-size:11px; font-weight:900; letter-spacing:.2px; font-variant-numeric:tabular-nums;
  background:linear-gradient(180deg, color-mix(in srgb,var(--pl-tone) 88%,#fff), color-mix(in srgb,var(--pl-tone) 66%,#000)) !important;
  border:1px solid color-mix(in srgb,var(--pl-tone) 55%,#fff) !important;
  color:#1b1226 !important; text-shadow:0 1px 0 #ffffff55 !important;
  box-shadow:inset 0 1px #ffffff66, inset 0 -2px #0000002e !important;
  opacity:.82;
}
.app .pl-res:first-child { opacity:1; transform:scale(1.06); box-shadow:inset 0 1px #ffffff66, 0 0 10px color-mix(in srgb,var(--pl-tone) 60%,transparent) !important; }