/* Тема «пиксель-арт»: один пиксельный шрифт, прямые углы, жёсткие тени, палитра ночной аркады. */
@font-face { font-family: "SL Pixel"; src: url("../fonts/slpixel.woff") format("woff"); font-display: block; }

:root {
  --bg: #0a0b1a;
  --panel: #15183a;
  --panel-2: #232857;
  --line: #4a57a0;
  --text: #eef1ff;
  --muted: #8e97cf;
  --red: #ff4d4d;
  --green: #5cf06a;
  --amber: #ffd23c;
  --ink: #05060f;
}

html { font-synthesis: none; }
html, body { background: var(--bg); }

/* Шрифт рисуется точно по сетке только в размерах, кратных 16px. */
body, body * {
  font-family: "SL Pixel", monospace !important;
  font-size: 16px !important;
  font-weight: 400 !important;
  letter-spacing: 0 !important;
  border-radius: 0 !important;
  -webkit-font-smoothing: none;
  line-height: 1.25;
}
img { image-rendering: pixelated; }

/* ---------- Шапка ---------- */
.topbar { background: var(--panel); border-bottom: 2px solid var(--line); box-shadow: 0 4px 0 var(--ink); }
body .logo, body .logo span { font-size: 32px !important; line-height: 1; }
.logo { text-shadow: 3px 3px 0 var(--ink); }
.logo span { color: var(--green); text-shadow: 3px 3px 0 #0b3a14; }
.chip { padding: 2px 8px; background: var(--panel-2); border: 2px solid var(--line); }
.chip.low { color: #7cc4ff; }
.chip.mid { color: #d59cff; }
.chip.high { color: var(--amber); border-color: var(--amber); }
.balance span { color: var(--muted); }
.balance b { color: var(--green); text-shadow: 2px 2px 0 #0b3a14; }
.me-chip { background: var(--panel-2); border: 2px solid var(--line); }
.me-chip img { border: 2px solid var(--ink); }

/* кнопки с «рельефом» */
.top-btn, .step, .quick button, .tab, .add-panel {
  background: var(--panel-2);
  border: 2px solid var(--line);
  color: var(--text);
  box-shadow: inset -2px -2px 0 rgba(0, 0, 0, 0.35), inset 2px 2px 0 rgba(255, 255, 255, 0.14);
}
.top-btn:active, .step:active, .quick button:active { box-shadow: inset 2px 2px 0 rgba(0, 0, 0, 0.4); }
.top-btn.accent, .tab.active { background: #e23d3d; border-color: #ff8a8a; color: #fff; }

/* ---------- Список игроков ---------- */
.players { background: var(--panel); border: 2px solid var(--line); box-shadow: 0 4px 0 var(--ink); }
.players-cols { border-bottom: 2px solid var(--line); }
.prow { grid-template-columns: 24px minmax(0, 1fr) 72px 52px 76px; border-bottom: 2px solid rgba(74, 87, 160, 0.25); }
.players-cols { grid-template-columns: minmax(0, 1fr) 72px 52px 76px; }
.players-cols > * { text-align: right; }
.players-cols > :first-child { text-align: left; }
.pname small { display: none; }
@media (min-width: 981px) { .layout { grid-template-columns: 360px 1fr; } }
.prow.win { background: rgba(92, 240, 106, 0.14); }
.prow.me { background: rgba(255, 210, 60, 0.14); }

/* ---------- Сцена ---------- */
.scene-wrap { border: 2px solid var(--line); box-shadow: 0 4px 0 var(--ink); }
/* строки развёртки, как на экране игрового автомата */
.scene-wrap::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: repeating-linear-gradient(0deg, rgba(0, 0, 0, 0.13) 0 1px, transparent 1px 3px);
}
.hud { background: none; gap: 4px; }
.hud-tier { background: var(--ink); border: 2px solid; padding: 2px 10px; }
body .hud-floor { color: var(--muted); text-shadow: 2px 2px 0 var(--ink); }
body .hud-mult {
  font-size: 64px !important;
  line-height: 1;
  color: #b9ff5a;
  background: linear-gradient(#f6ff7a 0 46%, #8dff5a 46% 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: none;
  filter: drop-shadow(4px 4px 0 #0b3a14) drop-shadow(0 0 10px rgba(125, 255, 90, 0.55));
}
body .hud-mult.crashed {
  background: linear-gradient(#ff9a8a 0 46%, #ff4d4d 46% 100%);
  -webkit-background-clip: text;
  background-clip: text;
  filter: drop-shadow(4px 4px 0 #4a0b0b) drop-shadow(0 0 10px rgba(255, 70, 70, 0.6));
}
.hud-mult.waiting { opacity: 0.75; }
.hud-status { text-shadow: 2px 2px 0 var(--ink); }
.countdown { height: 8px; background: var(--ink); border: 2px solid var(--line); }
#countdownBar { background: var(--amber); }

.toast { background: var(--ink); border: 2px solid var(--line); animation: none; }
.toast.win { border-color: var(--green); color: var(--green); }
.share-chip { background: var(--amber); color: #2a1a00; border: 2px solid var(--ink); box-shadow: 0 4px 0 #a86507; animation: none; }
.net-status { background: var(--ink); border: 2px solid var(--amber); }

/* ---------- Ставки ---------- */
.bet-panel { background: var(--panel); border: 2px solid var(--line); box-shadow: 0 4px 0 var(--ink); }
.amount-input, .auto-val, .name-row input { background: var(--ink); border: 2px solid var(--line); color: var(--text); }
.amount-input:focus, .auto-val:focus, .name-row input:focus { outline: none; border-color: var(--amber); }
.auto { color: var(--muted); }
.auto-on {
  appearance: none;
  -webkit-appearance: none;
  flex: none;
  width: 20px;
  height: 20px;
  margin: 0;
  background: var(--ink);
  border: 2px solid var(--line);
}
.auto-on:checked { background: var(--green); box-shadow: inset 0 0 0 3px var(--ink); }

.bet-btn {
  border: 2px solid var(--ink);
  color: #fff;
  text-shadow: 2px 2px 0 rgba(0, 0, 0, 0.45);
  transition: none;
}
.bet-btn .main, .bet-btn .sub { text-transform: uppercase; }
.bet-btn .sub { opacity: 1; }
.bet-btn.bet { background: #36c24c; box-shadow: inset 0 4px 0 #7dff8c, inset 0 -6px 0 #1f8a32, 0 4px 0 var(--ink); }
.bet-btn.cashout { background: #e23d3d; color: #fff; box-shadow: inset 0 4px 0 #ff8a8a, inset 0 -6px 0 #a11f1f, 0 4px 0 var(--ink); }
.bet-btn.cancel { background: #5a6398; box-shadow: inset 0 4px 0 #8e97cf, inset 0 -6px 0 #3a4270, 0 4px 0 var(--ink); }
.bet-btn.done { background: var(--panel-2); color: var(--muted); text-shadow: none; box-shadow: inset 0 0 0 2px var(--line); }
.bet-btn:active:not(:disabled) { transform: translateY(2px); }
.bet-btn:hover:not(:disabled) { filter: brightness(1.1); }
.hint { color: var(--muted); }
.bet-note { max-width: 220px; }

/* ---------- Окна ---------- */
.modal { background: rgba(5, 6, 15, 0.82); }
.modal-box { background: var(--panel); border: 2px solid var(--line); box-shadow: 0 6px 0 var(--ink); }
body .modal-box h2 { font-size: 32px !important; text-shadow: 3px 3px 0 var(--ink); }
.modal-close { color: var(--text); }
.kv code { background: var(--ink); border: 2px solid var(--line); }
.profile-ava { border: 2px solid var(--line); }
.pstat { background: var(--panel-2); border: 2px solid var(--line); }
.look { background: var(--panel-2); border: 2px solid var(--line); }
.look.active { box-shadow: inset 0 0 0 2px var(--tc); }
.look-tag { background: var(--ink); }
.lrow { border-bottom: 2px solid rgba(74, 87, 160, 0.25); }
.lrow.me { background: rgba(255, 210, 60, 0.14); }
.share-img { border: 2px solid var(--line); }

/* ---------- Планшет и телефон ---------- */
@media (max-width: 1100px) {
  .top-menu { background: var(--panel); border: 2px solid var(--line); box-shadow: 0 4px 0 var(--ink); }
}
@media (max-width: 760px) {
  body .logo, body .logo span { font-size: 16px !important; }
  .logo { text-shadow: 2px 2px 0 var(--ink); }
  .logo span { text-shadow: 2px 2px 0 #0b3a14; }
  .hud { top: 4px; gap: 3px; }
  .countdown { width: 160px; }
  /* плашки — над кнопкой «Поделиться», чтобы не наезжать на неё */
  .toasts { left: 8px; right: 8px; bottom: 46px; max-width: none; }
  .toast { padding: 3px 7px; }
  .share-chip { padding: 5px 9px; }
  .bet-btn { min-height: 110px; padding: 0 4px; }
  .bet-btn .main { line-height: 1.15; }
  .amount-input { width: 70px; }
  .auto-val { width: 60px; }
  .add-panel { border: 2px dashed var(--line); box-shadow: none; }
  .modal-box { border-width: 2px 0 0; }
}
@media (min-width: 761px) {
  body .bet-btn .main { font-size: 32px !important; line-height: 1; text-align: center; }
}