/* Казино-зал: ночное казино. Сукно, золото, стекло. */

:root {
  --bg: #07130d;
  --bg-2: #0b1d14;
  --felt: #0f3d26;
  --felt-2: #0b2e1d;
  --card: rgba(12, 30, 21, .78);
  --card-solid: #10261b;
  --line: rgba(242, 193, 78, .16);
  --line-2: rgba(255, 255, 255, .08);
  --text: #f3efe2;
  --muted: #9fb3a6;
  --gold: #f2c14e;
  --gold-2: #ffdf8a;
  --gold-3: #c98f22;
  --red: #ef5b54;
  --green: #45d483;
  --radius: 18px;
  --shadow: 0 18px 40px rgba(0, 0, 0, .45), 0 2px 0 rgba(255, 255, 255, .03) inset;
  --font: "Manrope", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --display: "Unbounded", "Manrope", system-ui, sans-serif;
  --gold-grad: linear-gradient(180deg, #ffe39a 0%, #f2c14e 45%, #d39a2a 100%);
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }

html { background: var(--bg); overflow-x: clip; }
body {
  margin: 0;
  min-height: 100vh;
  color: var(--text);
  font: 500 15px/1.45 var(--font);
  -webkit-font-smoothing: antialiased;
}
/* Фон зала — отдельный неподвижный слой: рисуется один раз. Раньше он был background-attachment: fixed
   на body, и браузер перерисовывал весь экран на каждом шаге прокрутки (на слабой видеокарте — лаги). */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  will-change: transform;
  background:
    radial-gradient(1200px 600px at 50% -10%, rgba(242, 193, 78, .14), transparent 60%),
    radial-gradient(900px 700px at 100% 100%, rgba(239, 91, 84, .08), transparent 60%),
    radial-gradient(1000px 800px at 0% 100%, rgba(69, 212, 131, .07), transparent 60%),
    repeating-linear-gradient(45deg, rgba(255, 255, 255, .012) 0 2px, transparent 2px 9px),
    linear-gradient(180deg, var(--bg-2), var(--bg));
}

h1, h2 { font-family: var(--display); font-weight: 700; letter-spacing: .01em; margin: 0 0 10px; }
h1 { font-size: 28px; }
h2 { font-size: 16px; display: flex; align-items: center; gap: 8px; }
.muted { color: var(--muted); margin: 0 0 16px; }
.small-hint { font-size: 13px; margin: 16px 0 8px; }
::selection { background: rgba(242, 193, 78, .35); }

/* ---------- Шапка ---------- */

.topbar {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 12px max(16px, calc((100vw - 1180px) / 2));
  /* Без backdrop-filter: размытие под липкой шапкой пересчитывалось на каждом кадре прокрутки. */
  background: rgba(6, 16, 11, .93);
  border-bottom: 1px solid var(--line);
}
.logo {
  margin-right: auto;
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--display);
  font-weight: 800;
  font-size: 26px;
  letter-spacing: .01em;
  white-space: nowrap;
}
.logo-text {
  background: var(--gold-grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 2px 12px rgba(242, 193, 78, .35));
  transition: filter .2s;
}
.logo[role="link"]:hover .logo-text { filter: drop-shadow(0 2px 14px rgba(242, 193, 78, .6)) brightness(1.1); }
.me { display: flex; gap: 12px; align-items: center; }
#me-name { font-weight: 700; }
.chips {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px 5px 8px;
  border-radius: 999px;
  background: rgba(242, 193, 78, .1);
  border: 1px solid rgba(242, 193, 78, .35);
  color: var(--gold-2);
  font-family: var(--display);
  font-weight: 700;
  font-size: 14px;
  font-variant-numeric: tabular-nums;
}
.chips::before { content: "🪙"; font-size: 15px; }
.chips::after { content: none; }

.conn { font-size: 12px; color: var(--muted); white-space: nowrap; }
.conn::before {
  content: "";
  display: inline-block;
  width: 8px; height: 8px;
  border-radius: 50%;
  margin-right: 6px;
  background: var(--gold);
  box-shadow: 0 0 8px currentColor;
}
.conn[data-state="open"]::before { background: var(--green); box-shadow: 0 0 10px var(--green); }
.conn[data-state="closed"]::before { background: var(--red); box-shadow: 0 0 10px var(--red); }

/* ---------- Каркас ---------- */

main { max-width: 1180px; margin: 0 auto; padding: 24px 16px 90px; }
.lobby { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 20px; align-items: start; }
.main-col, .side-col { display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.side-col { position: sticky; top: 76px; }

.card {
  position: relative;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 20px;
  box-shadow: var(--shadow);
  /* Без backdrop-filter: под карточками ровный тёмный фон, размытие было не видно, а прокрутку
     тормозило сильнее всего (29 карточек, каждая перемывала фон на каждом кадре). */
}
.card::before {
  /* тонкий блик сверху карточки */
  content: "";
  position: absolute;
  inset: 0 18px auto;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 223, 138, .35), transparent);
  pointer-events: none;
}

/* ---------- Поля и кнопки ---------- */

input, select, textarea {
  flex: 1;
  min-width: 0;
  padding: 11px 14px;
  border-radius: 12px;
  border: 1px solid var(--line-2);
  background: rgba(0, 0, 0, .35);
  color: var(--text);
  font: inherit;
  transition: border-color .15s, box-shadow .15s;
}
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: rgba(242, 193, 78, .6);
  box-shadow: 0 0 0 3px rgba(242, 193, 78, .15);
}
input::placeholder, textarea::placeholder { color: rgba(159, 179, 166, .7); }

button {
  position: relative;
  padding: 11px 18px;
  border: 0;
  border-radius: 12px;
  background: var(--gold-grad);
  color: #2a1b02;
  font: inherit;
  font-weight: 800;
  letter-spacing: .01em;
  cursor: pointer;
  box-shadow: 0 6px 18px rgba(242, 193, 78, .22), 0 1px 0 rgba(255, 255, 255, .5) inset, 0 -2px 0 rgba(0, 0, 0, .18) inset;
  transition: transform .08s, filter .15s, box-shadow .15s;
}
button:not(:disabled):hover { filter: brightness(1.07); box-shadow: 0 8px 24px rgba(242, 193, 78, .32), 0 1px 0 rgba(255, 255, 255, .5) inset, 0 -2px 0 rgba(0, 0, 0, .18) inset; }
button:not(:disabled):active { transform: translateY(1px) scale(.99); }
button:disabled { opacity: .45; cursor: default; box-shadow: none; }
button:focus-visible { outline: 2px solid var(--gold-2); outline-offset: 2px; }

button.ghost {
  background: rgba(255, 255, 255, .05);
  color: var(--text);
  border: 1px solid var(--line-2);
  font-weight: 600;
  box-shadow: none;
}
button.ghost:not(:disabled):hover { background: rgba(255, 255, 255, .09); border-color: rgba(242, 193, 78, .35); box-shadow: none; }
button.danger {
  background: linear-gradient(180deg, #ff8a7f, #e0443d 55%, #b72c26);
  color: #fff;
  box-shadow: 0 6px 18px rgba(239, 91, 84, .25), 0 1px 0 rgba(255, 255, 255, .35) inset;
}
button.link {
  padding: 0;
  background: none;
  color: var(--muted);
  font-weight: 500;
  font-size: 13px;
  text-decoration: underline;
  text-underline-offset: 3px;
  box-shadow: none;
}
button.link:not(:disabled):hover { color: var(--text); box-shadow: none; filter: none; }

.error { color: var(--red); min-height: 1.4em; margin: 12px 0 0; }

/* ---------- Вход ---------- */

.login {
  max-width: 440px;
  margin: 8vh auto 0;
  padding: 36px 32px 28px;
  text-align: center;
  overflow: hidden;
}
.login::after {
  content: "♠ ♥ ♦ ♣";
  position: absolute;
  inset: auto 0 -18px;
  font-size: 64px;
  letter-spacing: 18px;
  color: rgba(242, 193, 78, .06);
  pointer-events: none;
}
.login h1 {
  font-size: 34px;
  background: var(--gold-grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.login form { display: flex; gap: 8px; }
.login-safe { margin: 14px 0 0; font-size: 13px; font-weight: 700; color: var(--gold-2); }
.login .login-title { margin: 0 0 8px; display: flex; align-items: center; justify-content: center; gap: 10px; flex-wrap: wrap; }
.age-badge {
  padding: 3px 9px; border-radius: 999px; border: 1px solid rgba(242, 193, 78, .55);
  font: 800 13px/1.2 var(--font); color: var(--gold-2); -webkit-text-fill-color: var(--gold-2);
}
.login-tag { margin: 0 0 8px; font-weight: 700; font-size: 16px; line-height: 1.35; color: var(--text); }
.login-form.play-form { grid-template-columns: minmax(0, 1fr) auto; }   /* ник и «Играть» в ряд и на телефоне */
.play-form input { min-width: 0; font-size: 16px; }
.play-form button { padding: 13px 26px; font-size: 16px; }
.play-hint { margin: 10px 0 0; }
.login-switch { margin-top: 14px; font-size: 14px; text-decoration: underline; text-underline-offset: 3px; }

/* ---------- Футер: 18+ и короткое предупреждение ---------- */

.site-foot {
  max-width: 900px;
  margin: 28px auto 0;
  padding: 0 16px calc(18px + env(safe-area-inset-bottom));
  text-align: center;
  font-size: 12px;
  line-height: 1.7;
  color: var(--muted);
}
.site-foot span { white-space: nowrap; }
.site-foot a { color: var(--gold-2); white-space: nowrap; }
body.lk-full .site-foot { display: none; }

/* ---------- Окно 18+ (на основе заставки .pause) ---------- */

.age-gate { z-index: 9001; }
.age-actions { display: flex; flex-direction: column; gap: 10px; margin-top: 22px; }
.age-more { margin: 16px 0 0; font-size: 13px; }
.age-more a { color: var(--muted); }

/* ---------- Вкладки ---------- */

/* Внутри игры: «Главная» и три группы — те же разделы, что на главной. */
.tabs {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: 6px;
  padding: 6px;
  border-radius: 16px;
  background: rgba(0, 0, 0, .3);
  border: 1px solid var(--line-2);
}
.tab-group {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 2px;
  padding: 2px 4px 2px 2px;
  border-radius: 12px;
  background: rgba(255, 255, 255, .025);
  border-left: 3px solid var(--g);
}
.tab-group.casino { --g: #f2c14e; }
.tab-group.versus { --g: #e0445a; }
.tab-group.slots { --g: #5fe8d8; }
.tab-group-name {
  padding: 8px 10px;
  border-radius: 10px;
  background: none;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  box-shadow: none;
  white-space: nowrap;
}
.tab-group-name::after { content: " ▸"; color: var(--g); }
.tab-group.open .tab-group-name::after { content: none; }
.tab-group-name:not(:disabled):hover { color: var(--text); background: rgba(255, 255, 255, .05); box-shadow: none; filter: none; }
.tab-group:not(.open) .tab { display: none; }
.tab {
  white-space: nowrap;
  padding: 9px 12px;
  border-radius: 12px;
  background: transparent;
  color: var(--muted);
  font-family: var(--display);
  font-weight: 600;
  font-size: 14px;
  box-shadow: none;
  white-space: nowrap;
}
.tab:not(:disabled):hover { color: var(--text); background: rgba(255, 255, 255, .05); box-shadow: none; filter: none; }
.tab.active, .tab.active:not(:disabled):hover {
  background: var(--gold-grad);
  color: #2a1b02;
  box-shadow: 0 6px 18px rgba(242, 193, 78, .25);
}
.tab .dot {
  display: inline-block;
  width: 9px; height: 9px;
  margin-left: 6px;
  border-radius: 50%;
  background: var(--red);
  box-shadow: 0 0 10px var(--red);
  vertical-align: middle;
  animation: pulse 1s infinite;
}
@keyframes pulse { 50% { transform: scale(1.35); opacity: .7; } }

/* ---------- Пособие, уведомления ---------- */

.bonus {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  border-color: rgba(242, 193, 78, .5);
  background: linear-gradient(120deg, rgba(242, 193, 78, .16), rgba(12, 30, 21, .8) 60%);
}
.bonus .muted { margin: 0; }

.toast {
  position: fixed;
  left: 50%;
  bottom: 84px;
  z-index: 45;
  transform: translateX(-50%);
  margin: 0;
  padding: 0;
  max-width: calc(100vw - 32px);
  border-radius: 12px;
  font-weight: 600;
  text-align: center;
  pointer-events: none;
}
.toast:not(:empty) {
  padding: 10px 18px;
  background: rgba(30, 10, 10, .92);
  border: 1px solid rgba(239, 91, 84, .5);
  box-shadow: 0 12px 30px rgba(0, 0, 0, .5);
  animation: toast-in .2s ease-out;
}
.toast.ok:not(:empty) { color: var(--green); background: rgba(8, 30, 18, .94); border-color: rgba(69, 212, 131, .5); }
@keyframes toast-in { from { opacity: 0; transform: translate(-50%, 8px); } }

/* ---------- Общие куски игр ---------- */

.history { display: flex; gap: 6px; overflow: hidden; margin-bottom: 14px; min-height: 28px; mask-image: linear-gradient(90deg, #000 85%, transparent); }
.history span {
  flex: none;
  padding: 3px 10px;
  border-radius: 999px;
  font-family: var(--display);
  font-size: 12px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  background: rgba(239, 91, 84, .12);
  border: 1px solid rgba(239, 91, 84, .3);
  color: #ff8a83;
}
.history span.good { color: var(--green); background: rgba(69, 212, 131, .1); border-color: rgba(69, 212, 131, .3); }
.history span.great { color: var(--gold-2); background: rgba(242, 193, 78, .12); border-color: rgba(242, 193, 78, .4); }
/* номера рулетки в истории */
.history span.rn { min-width: 30px; text-align: center; color: #fff; }
.history span.rn.red { background: linear-gradient(180deg, #e0443d, #a8231d); border-color: #ff8a83; }
.history span.rn.black { background: linear-gradient(180deg, #2b2b2b, #0e0e0e); border-color: #555; }
.history span.rn.green { background: linear-gradient(180deg, #1fa35c, #0d6b39); border-color: #5be39a; }

.controls {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 10px;
  margin-top: 18px;
}
.field { display: flex; flex-direction: column; gap: 6px; flex: 1 1 120px; font-size: 12px; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; }
.field input { flex: none; font-size: 16px; text-transform: none; letter-spacing: 0; }
.quick { display: flex; flex-wrap: wrap; gap: 6px; }
.quick button { min-width: 46px; }
.action { flex: 1 1 200px; min-height: 48px; font-size: 16px; font-family: var(--display); }
.action.cashout {
  background: linear-gradient(180deg, #8af5b6, #38c978 55%, #1f9a55);
  color: #052312;
  box-shadow: 0 0 0 0 rgba(69, 212, 131, .6), 0 8px 24px rgba(69, 212, 131, .35);
  animation: cashout-glow 1s infinite;
}
@keyframes cashout-glow { 50% { box-shadow: 0 0 0 6px rgba(69, 212, 131, 0), 0 8px 30px rgba(69, 212, 131, .55); } }
.my-result { min-height: 1.4em; margin: 12px 0 0; color: var(--muted); font-weight: 700; }
.my-result.win { color: var(--green); }
.my-result.lose { color: var(--red); }

.bets { width: 100%; border-collapse: collapse; margin-top: 16px; font-variant-numeric: tabular-nums; font-size: 14px; }
.bets th { text-align: left; font-weight: 600; font-size: 11px; color: var(--muted); padding: 6px 0; text-transform: uppercase; letter-spacing: .06em; }
.bets td { padding: 8px 0; border-top: 1px solid var(--line-2); }
.bets th:not(:first-child), .bets td:not(:first-child) { text-align: right; }
.bets tr.self td:first-child { color: var(--gold-2); font-weight: 700; }
.bets .won { color: var(--green); font-weight: 700; }
.bets .lost { color: var(--red); }

/* ---------- Краш ---------- */

.stage {
  position: relative;
  height: 300px;
  border-radius: 14px;
  overflow: hidden;
  background:
    radial-gradient(2px 2px at 20% 30%, rgba(255, 255, 255, .5), transparent),
    radial-gradient(1.5px 1.5px at 70% 20%, rgba(255, 255, 255, .4), transparent),
    radial-gradient(1px 1px at 40% 70%, rgba(255, 255, 255, .35), transparent),
    radial-gradient(1.5px 1.5px at 85% 60%, rgba(255, 255, 255, .3), transparent),
    radial-gradient(1px 1px at 10% 85%, rgba(255, 255, 255, .3), transparent),
    radial-gradient(800px 300px at 50% 120%, rgba(242, 193, 78, .18), transparent 70%),
    linear-gradient(180deg, #050b14, #0b1626 60%, #0d1d1a);
  border: 1px solid var(--line-2);
  box-shadow: inset 0 0 60px rgba(0, 0, 0, .6);
}
.stage canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}
.mult {
  font-family: var(--display);
  font-size: clamp(52px, 11vw, 96px);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  color: #fff;
  text-shadow: 0 0 30px rgba(242, 193, 78, .55), 0 4px 0 rgba(0, 0, 0, .3);
}
.mult[data-phase="running"] { color: var(--gold-2); }
.mult[data-phase="betting"] { color: rgba(243, 239, 226, .55); text-shadow: none; }
.mult[data-phase="crashed"] { color: var(--red); text-shadow: 0 0 34px rgba(239, 91, 84, .7); animation: crashed .45s; }
@keyframes crashed { 20% { transform: translateX(-8px) rotate(-2deg); } 50% { transform: translateX(8px) rotate(2deg); } 80% { transform: translateX(-4px); } }
.phase { margin-top: 10px; padding: 0 12px; text-align: center; color: var(--muted); font-weight: 600; }
.phase[data-res="win"] { color: var(--green); font-weight: 800; font-size: 1.1em; }
.phase[data-res="lose"] { color: var(--red); font-weight: 800; font-size: 1.1em; }

/* «Как играть» в играх витрины (howto.js) */
.howto {
  margin: 0 0 14px; padding: 14px 16px 14px; border-radius: 14px;
  border: 1px solid rgba(242, 193, 78, .35); background: rgba(242, 193, 78, .07);
}
.howto h3 { margin: 0 0 8px; font-size: 16px; }
.howto ol { margin: 0; padding-left: 22px; line-height: 1.45; }
.howto li + li { margin-top: 4px; }
.howto-tip { margin: 8px 0 0; color: var(--muted); font-size: 14px; }
.howto-guest { margin: 8px 0 0; color: var(--gold-2); font-size: 14px; font-weight: 700; }
.howto > button { margin-top: 12px; padding: 9px 18px; }
.howto-open { display: block; margin: 12px 0 0 auto; font-size: 14px; }

/* ---------- Колесо фортуны ---------- */

.fw-top { display: flex; gap: 24px; align-items: center; flex-wrap: wrap; }
.fw-box { position: relative; width: 360px; max-width: 100%; aspect-ratio: 1; flex: none; margin: 0 auto; }
.fw-box canvas { width: 100%; height: 100%; display: block; filter: drop-shadow(0 18px 30px rgba(0, 0, 0, .55)); }
.fw-hub {
  position: absolute; left: 50%; top: 52.5%; transform: translate(-50%, -50%);
  width: 23%; aspect-ratio: 1; border-radius: 50%;
  display: grid; place-items: center;
  font-family: var(--display); font-weight: 800; font-size: 26px; color: var(--gold-2);
  pointer-events: none;
}
.fw-hub.show { animation: pop .4s ease-out; color: #fff; text-shadow: 0 2px 10px rgba(0, 0, 0, .6); }
.fw-hub.show.m60 { color: var(--gold-2); text-shadow: 0 0 18px rgba(255, 214, 94, .9); }
.fw-hub.show.m0 { font-size: 34px; }
.fw-side { flex: 1 1 260px; display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.fw-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.fw-card {
  position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 2px;
  padding: 10px 12px; border-radius: 14px; text-align: left; color: #fff;
  border: 1px solid rgba(255, 255, 255, .18);
  background: linear-gradient(160deg, var(--c2), var(--c1));
  box-shadow: 0 6px 18px rgba(0, 0, 0, .35), inset 0 1px 0 rgba(255, 255, 255, .2);
  transition: transform .12s, box-shadow .2s, opacity .2s, filter .2s;
}
.fw-card:hover:not(:disabled) { transform: translateY(-2px); }
.fw-card:disabled { cursor: default; }
.fw-card.m2 { --c1: #0646d6; --c2: #3fb4ff; }
.fw-card.m3 { --c1: #008f39; --c2: #5dff95; }
.fw-card.m10 { --c1: #a00c83; --c2: #ff5ce0; }
.fw-card.m60 { --c1: #ff8a00; --c2: #ffe14d; color: #3a1d00; }
.fw-card-mult { font-family: var(--display); font-size: 22px; line-height: 1.1; }
.fw-card:not(.m60) { text-shadow: 0 1px 3px rgba(0, 0, 0, .45); }
.fw-card small { font-size: 11px; opacity: .85; }
.fw-card-pot { font-size: 12px; font-weight: 600; opacity: .9; }
.fw-card-mine { position: absolute; top: 8px; right: 10px; padding: 1px 8px; border-radius: 999px; font-size: 12px; font-weight: 800; background: rgba(0, 0, 0, .35); color: #fff; }
.fw-card-mine:empty { display: none; }
.fw-card.has-mine { box-shadow: 0 0 0 2px var(--gold-2), 0 6px 18px rgba(0, 0, 0, .35); }
.fw-card.win { box-shadow: 0 0 0 3px #fff, 0 0 26px rgba(255, 255, 255, .55); animation: pop .4s; }
.fw-card.dim { opacity: .45; filter: saturate(.6); }
.history span.fwh { min-width: 38px; text-align: center; color: #fff; }
.history span.fwh.m2 { background: linear-gradient(180deg, #3fb4ff, #0a5cff); border-color: #9fd6ff; }
.history span.fwh.m3 { background: linear-gradient(180deg, #5dff95, #00b347); border-color: #b2ffcb; }
.history span.fwh.m10 { background: linear-gradient(180deg, #ff5ce0, #c2129f); border-color: #ffb3ef; }
.history span.fwh.m60 { background: linear-gradient(180deg, #ffe14d, #ff8a00); border-color: #fff3b0; color: #3b2400; }
.history span.fwh.m0 { background: linear-gradient(180deg, #a3102a, #2a0008); border-color: #ff5c74; }
.fw-stake { display: inline-block; margin-left: 6px; padding: 1px 8px; border-radius: 999px; font-size: 12px; font-weight: 700; color: #fff; }
.fw-stake.m2 { background: #0a5cff; }
.fw-stake.m3 { background: #00a640; }
.fw-stake.m10 { background: #c2129f; }
.fw-stake.m60 { background: #ffb21f; color: #2e1c00; }
.dv-num.m2 { background: linear-gradient(180deg, #3fb4ff, #0a5cff); }
.dv-num.m3 { background: linear-gradient(180deg, #5dff95, #00b347); }
.dv-num.m10 { background: linear-gradient(180deg, #ff5ce0, #c2129f); }
.dv-num.m60 { background: linear-gradient(180deg, #ffe14d, #ff8a00); color: #3b2400; }
.dv-num.m0 { background: linear-gradient(180deg, #a3102a, #2a0008); }
@media (max-width: 560px) {
  .fw-hub { font-size: 20px; }
  .fw-card-mult { font-size: 18px; }
}

/* ---------- Рулетка ---------- */

.r-top { display: flex; gap: 24px; align-items: center; flex-wrap: wrap; }
.wheel-box {
  position: relative;
  width: 300px; height: 300px;
  flex: none;
  margin: 0 auto;
  border-radius: 50%;
  box-shadow: 0 20px 50px rgba(0, 0, 0, .6), 0 0 0 6px rgba(0, 0, 0, .25);
}
.wheel-box canvas { width: 300px; height: 300px; display: block; }
.r-center {
  position: absolute;
  inset: 0;
  margin: auto;
  width: 52px; height: 52px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: rgba(10, 6, 2, .72);
  border: 2px solid var(--gold);
  color: var(--gold-2);
  font-family: var(--display);
  font-size: 20px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  box-shadow: 0 0 20px rgba(242, 193, 78, .35);
  transition: transform .3s;
}
.r-center:empty { opacity: 0; }
.r-center.red, .r-center.black, .r-center.green { width: 64px; height: 64px; font-size: 26px; color: #fff; animation: pop .4s ease-out; }
.r-center.red { background: radial-gradient(circle at 35% 30%, #ff6b62, #b3261e); }
.r-center.black { background: radial-gradient(circle at 35% 30%, #4a4a4a, #0c0c0c); }
.r-center.green { background: radial-gradient(circle at 35% 30%, #3fd185, #0d6b39); }
@keyframes pop { 0% { transform: scale(.4); } 70% { transform: scale(1.15); } }

.r-side { flex: 1 1 240px; display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.r-phase { color: var(--muted); font-weight: 600; }
.r-result { min-height: 1.4em; font-family: var(--display); font-weight: 700; font-size: 18px; }
.r-result.win { color: var(--green); }
.r-result.lose { color: var(--red); }
.r-label { font-size: 11px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .08em; }
.r-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
  --c: #2b6cb0;
  width: 54px; height: 54px;
  padding: 0;
  border-radius: 50%;
  border: 0;
  color: #fff;
  font-family: var(--display);
  font-size: 12px;
  font-weight: 800;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .6);
  /* фишка: кант с полосками и внутренний круг */
  background:
    radial-gradient(circle, var(--c) 0 52%, transparent 53%),
    repeating-conic-gradient(var(--c) 0 20deg, #fff 20deg 30deg),
    var(--c);
  box-shadow: 0 0 0 2px rgba(0, 0, 0, .35) inset, 0 4px 10px rgba(0, 0, 0, .5);
  transition: transform .12s;
}
.chip:not(:disabled):hover { transform: translateY(-3px); filter: brightness(1.1); box-shadow: 0 0 0 2px rgba(0, 0, 0, .35) inset, 0 8px 16px rgba(0, 0, 0, .5); }
.chip[data-v="10"] { --c: #5b6577; }
.chip[data-v="50"] { --c: #2563c4; }
.chip[data-v="100"] { --c: #1d8a52; }
.chip[data-v="500"] { --c: #b3261e; }
.chip[data-v="1000"] { --c: #7a3fd1; }
.chip[data-v="5000"] { --c: #c9862a; }
.chip.active { transform: translateY(-4px); box-shadow: 0 0 0 3px var(--gold-2), 0 0 18px rgba(242, 193, 78, .7); }
.r-custom { display: flex; align-items: center; gap: 10px; margin-top: 10px; color: var(--muted, #9aa3b2); font-size: 14px; }
.r-custom input {
  width: 130px; padding: 8px 12px;
  border-radius: 999px; border: 1px solid rgba(255, 255, 255, .18);
  background: rgba(0, 0, 0, .3); color: #fff; font: inherit; font-weight: 700;
}
.r-custom input:focus { outline: none; border-color: var(--gold-2); }
.r-custom input.active { border-color: var(--gold-2); box-shadow: 0 0 0 2px rgba(242, 193, 78, .35), 0 0 14px rgba(242, 193, 78, .4); }
.r-custom input.bad { border-color: #e05252; box-shadow: none; }
.r-mytotal { color: var(--gold-2); min-height: 1.4em; font-weight: 700; }

.board-wrap {
  overflow-x: auto;
  padding: 12px;
  border-radius: 14px;
  background: radial-gradient(ellipse at center, #136b3e, #0b4527 80%);
  border: 6px solid #4a250f;
  box-shadow: inset 0 0 30px rgba(0, 0, 0, .45), 0 10px 30px rgba(0, 0, 0, .4);
}
.board {
  display: grid;
  grid-template-columns: 32px repeat(12, minmax(24px, 1fr)) 32px;
  grid-template-rows: repeat(3, 40px) 34px 34px;
  gap: 2px;
  min-width: 380px;
}
.cell {
  position: relative;
  padding: 0;
  border-radius: 4px;
  border: 1px solid rgba(255, 255, 255, .55);
  color: #fff;
  font-family: var(--display);
  font-weight: 600;
  font-size: 13px;
  background: transparent;
  box-shadow: none;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .5);
}
.cell:not(:disabled):hover { background-color: rgba(255, 255, 255, .14); box-shadow: none; filter: none; }
.cell.red { background: #b3261e; }
.cell.black { background: #151515; }
.cell.green { background: #14894a; }
.cell.red:not(:disabled):hover, .cell.black:not(:disabled):hover, .cell.green:not(:disabled):hover { filter: brightness(1.25); }
.cell:disabled { cursor: default; opacity: .9; }
.cell.win { box-shadow: 0 0 0 3px var(--gold-2), 0 0 18px rgba(242, 193, 78, .8); z-index: 1; animation: pop .4s; }
.cell .stake {
  position: absolute;
  right: -6px;
  top: -8px;
  min-width: 24px;
  padding: 2px 5px;
  border-radius: 999px;
  background: var(--gold-grad);
  color: #2a1b02;
  font-size: 10px;
  font-weight: 800;
  box-shadow: 0 2px 6px rgba(0, 0, 0, .5);
  z-index: 2;
}

/* ---------- Покер (Техасский холдем) ---------- */

.poker-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.pot-box {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--muted);
  font-weight: 700;
  text-transform: uppercase;
  font-size: 12px;
  letter-spacing: .06em;
}
.pot { color: var(--gold-2); font-family: var(--display); font-size: 26px; font-variant-numeric: tabular-nums; text-transform: none; }
.poker-phase { color: var(--muted); font-weight: 600; }

.ptable { position: relative; aspect-ratio: 16 / 10; min-height: 360px; margin: 18px 0 8px; }
.felt {
  position: absolute;
  inset: 13% 11%;
  border-radius: 50% / 50%;
  background: radial-gradient(ellipse at center, #16804a, #0c5130 70%, #093d25);
  border: 12px solid #4a250f;
  box-shadow: inset 0 0 50px rgba(0, 0, 0, .55), 0 0 0 3px #c9a24a, 0 18px 40px rgba(0, 0, 0, .5);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.pk-board { display: flex; gap: 6px; }
.pk-pot { min-height: 1.3em; font-family: var(--display); font-weight: 700; font-size: 14px; color: var(--gold-2); text-shadow: 0 2px 4px rgba(0, 0, 0, .5); }
.pk-result {
  max-width: 80%;
  padding: 6px 14px;
  border-radius: 999px;
  background: rgba(0, 0, 0, .55);
  border: 1px solid var(--green);
  color: var(--green);
  font-weight: 800;
  font-size: 13px;
  text-align: center;
  animation: pop .35s;
}

/* Карта */
.pcard {
  --w: 46px;
  position: relative;
  width: var(--w);
  height: calc(var(--w) * 1.4);
  flex: none;
  border-radius: calc(var(--w) * .12);
  background: linear-gradient(160deg, #fff, #ecebe6);
  box-shadow: 0 4px 10px rgba(0, 0, 0, .45), inset 0 -2px 0 rgba(0, 0, 0, .08);
  color: #151515;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  line-height: 1;
  user-select: none;
}
.pcard b { font-family: var(--display); font-size: calc(var(--w) * .42); font-weight: 800; }
.pcard i { font-style: normal; font-size: calc(var(--w) * .44); margin-top: 2px; }
.pcard.red { color: #d0261e; }
.pcard.small { --w: 26px; border-radius: 4px; box-shadow: 0 2px 4px rgba(0, 0, 0, .5); }
.pcard.small i { margin-top: 0; }
.pcard.back {
  background:
    repeating-linear-gradient(45deg, rgba(255, 255, 255, .14) 0 3px, transparent 3px 7px),
    linear-gradient(160deg, #b3261e, #6f120e);
  border: 2px solid #fff;
}
.pcard.slot { background: rgba(0, 0, 0, .18); box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .15); }
.pcard.deal { animation: deal .45s cubic-bezier(.2, .8, .3, 1.2); }
@keyframes deal { from { transform: translateY(-40px) rotate(-14deg) scale(.6); opacity: 0; } }
.pcard.hl { box-shadow: 0 0 0 3px var(--gold-2), 0 0 18px rgba(242, 193, 78, .8); transform: translateY(-4px); }

/* Места */
.pk-seats { position: absolute; inset: 0; pointer-events: none; }
.pk-seat {
  position: absolute;
  transform: translate(-50%, -50%);
  width: 128px;
  padding: 6px 8px 7px;
  border-radius: 14px;
  background: rgba(6, 14, 10, .9);
  border: 1px solid rgba(255, 255, 255, .12);
  box-shadow: 0 8px 18px rgba(0, 0, 0, .45);
  font-size: 13px;
  text-align: center;
  pointer-events: auto;
  transition: box-shadow .2s, opacity .2s;
}
.pk-seat.empty { width: 92px; padding: 10px 6px; color: rgba(255, 255, 255, .3); background: rgba(0, 0, 0, .25); border-style: dashed; font-size: 12px; }
.pk-seat.mine { border-color: rgba(242, 193, 78, .7); }
.pk-seat.turn { box-shadow: 0 0 0 2px var(--gold-2), 0 0 26px rgba(242, 193, 78, .55); }
.pk-seat.folded { opacity: .5; }
.pk-seat.offline { opacity: .6; }
.pk-seat.winner { border-color: var(--green); box-shadow: 0 0 0 2px var(--green), 0 0 28px rgba(69, 212, 131, .6); }
.pk-cards { display: flex; justify-content: center; gap: 3px; min-height: 38px; margin-top: -26px; margin-bottom: 4px; }
.pk-head { display: flex; align-items: center; justify-content: center; gap: 6px; }
.pk-head .avatar { width: 22px; height: 22px; font-size: 11px; }
.pk-name { font-weight: 800; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 84px; }
.pk-stack { color: var(--gold-2); font-family: var(--display); font-weight: 600; font-size: 12px; font-variant-numeric: tabular-nums; }
.pk-note { margin-top: 2px; color: var(--muted); font-size: 11px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pk-note.won { color: var(--green); font-size: 12px; }
.pk-tag {
  position: absolute;
  top: -8px;
  min-width: 22px;
  padding: 1px 5px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 800;
  box-shadow: 0 2px 6px rgba(0, 0, 0, .5);
}
.pk-tag.dealer { right: -8px; background: #fff; color: #111; }
.pk-tag.blind { left: -8px; background: #2563c4; color: #fff; }
.pk-tag.blind + .pk-tag.blind { left: auto; right: 18px; }
.pk-timer { position: absolute; left: 8px; right: 8px; bottom: 3px; height: 3px; border-radius: 999px; background: rgba(255, 255, 255, .1); overflow: hidden; }
.pk-timer i { display: block; height: 100%; background: var(--gold-grad); transition: width .25s linear; }

/* Стол с ботами: переключатель столов, аватар-эмодзи и реплики пузырём */
.pk-mode { width: max-content; max-width: 100%; margin: 0 auto 12px; }
.pk-mode button { padding: 7px 14px; }

/* Лобби покерных столов (server/rooms.js): список, новый стол, вход по коду. */
.pk-lobby-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
.pk-lobby-head h2 { margin: 0; }
.pk-code { display: flex; gap: 6px; }
.pk-code input { width: 118px; text-transform: uppercase; letter-spacing: .12em; font-weight: 800; }
.pk-rooms { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 10px; margin: 0 0 16px; }
.pk-row {
  display: grid; gap: 6px; padding: 12px 14px; border-radius: 14px;
  border: 1px solid var(--line-2); background: rgba(255, 255, 255, .03);
}
.pk-row.on { border-color: rgba(69, 212, 131, .35); }
.pk-row.priv { border-color: rgba(242, 193, 78, .35); background: rgba(242, 193, 78, .05); }
.pk-row.here { border-color: var(--gold); box-shadow: 0 0 0 1px rgba(242, 193, 78, .35) inset; }
.pk-row-title { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.pk-row-title b { font-family: var(--display); font-size: 14px; font-weight: 700; }
.pk-row-st { font-size: 12px; color: var(--muted); white-space: nowrap; }
.pk-row.on .pk-row-st { color: var(--green); }
.pk-row.here .pk-row-st { color: var(--gold-2); }
.pk-row-meta, .pk-row-names { font-size: 13px; color: var(--muted); }
.pk-row-names { color: var(--text); overflow-wrap: anywhere; }
.pk-row-foot { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-top: 2px; }
.pk-row-foot button { padding: 7px 18px; font-size: 14px; min-height: 0; }
.pk-dots { display: inline-flex; align-items: center; gap: 3px; font-size: 12px; color: var(--muted); }
.pk-dots i { width: 9px; height: 9px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .25); }
.pk-dots i.on { background: var(--gold); border-color: var(--gold); }
.pk-new { display: grid; gap: 10px; max-width: 460px; padding: 14px; border-radius: 14px; border: 1px dashed var(--line); }
.pk-new h3 { margin: 0; font-family: var(--display); font-size: 14px; }
.pk-new .seg { width: max-content; max-width: 100%; }
.pk-new .hint { margin: 0; }

/* Шапка стола: назад, название, код, позвать. */
.pk-room-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 6px; }
.pk-room-head .link { padding: 4px 0; }
.pk-room-name { font-family: var(--display); font-size: 15px; }
.pk-room-code {
  padding: 2px 10px; border-radius: 999px; font-weight: 800; letter-spacing: .12em; font-size: 13px;
  color: #2a1b02; background: var(--gold-grad);
}
.pk-share { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; margin-bottom: 4px; }
.pk-share select { min-width: 0; max-width: 180px; }
.pk-kick {
  position: absolute; top: -8px; right: -8px; z-index: 3; min-width: 22px; height: 22px; padding: 0 6px;
  border-radius: 999px; font-size: 12px; line-height: 1; background: rgba(239, 91, 84, .85); color: #fff; border: 0;
}
.pk-kick.sure { background: var(--red); font-weight: 800; }

/* Позвали за стол: карточка над нижним краем экрана. */
.table-invite {
  position: fixed; left: 50%; bottom: 18px; z-index: 60; transform: translateX(-50%);
  width: min(420px, calc(100vw - 32px)); padding: 14px 16px; border-radius: 16px;
  background: var(--card-solid); border: 1px solid var(--gold); box-shadow: var(--shadow);
}
.table-invite p { margin: 0 0 10px; font-weight: 700; }
.ti-btns { display: flex; gap: 8px; flex-wrap: wrap; }

@media (max-width: 560px) {
  .pk-rooms { grid-template-columns: 1fr; }
  .pk-code input { width: 96px; }
  .pk-share select { max-width: 140px; }
}
.pk-head .avatar.bot { background: rgba(255, 255, 255, .1); font-size: 15px; }
.pk-seat.bot .pk-name::after { content: " 🤖"; font-size: 10px; opacity: .7; }
.pk-say {
  --say-x: -50%;
  position: absolute;
  left: 50%;
  bottom: calc(100% + 8px);
  z-index: 3;
  width: max-content;
  max-width: 150px;
  padding: 5px 9px;
  border-radius: 12px;
  background: #fff;
  color: #1b1b1b;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.25;
  white-space: normal;
  box-shadow: 0 6px 14px rgba(0, 0, 0, .45);
  pointer-events: none;
  animation: pk-say 4.5s ease forwards;
}
.pk-say::after { content: ""; position: absolute; left: 50%; top: 100%; margin-left: -6px; border: 6px solid transparent; border-top-color: #fff; }
.slot-1 .pk-say, .slot-2 .pk-say { --say-x: 0%; left: 0; }
.slot-4 .pk-say, .slot-5 .pk-say { --say-x: 0%; left: auto; right: 0; }
.slot-1 .pk-say::after, .slot-2 .pk-say::after { left: 28px; }
.slot-4 .pk-say::after, .slot-5 .pk-say::after { left: auto; right: 22px; }
.slot-3 .pk-say { bottom: auto; top: calc(100% + 8px); }
.slot-3 .pk-say::after { top: auto; bottom: 100%; border-top-color: transparent; border-bottom-color: #fff; }
@keyframes pk-say {
  0% { opacity: 0; transform: translate(var(--say-x), 6px) scale(.9); }
  6%, 85% { opacity: 1; transform: translate(var(--say-x), 0) scale(1); }
  100% { opacity: 0; transform: translate(var(--say-x), -4px); }
}
.pk-bots-info { text-align: center; font-size: 13px; }
.pk-wait { text-align: center; color: var(--gold-2); }

/* Ставка игрока на улице: стопка фишек ближе к центру стола */
.pk-bet {
  position: absolute;
  padding: 2px 8px 2px 22px;
  border-radius: 999px;
  background: rgba(0, 0, 0, .55);
  color: var(--gold-2);
  font-family: var(--display);
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}
.pk-bet::before {
  content: "";
  position: absolute;
  left: 4px; top: 50%;
  width: 14px; height: 14px;
  margin-top: -7px;
  border-radius: 50%;
  background: radial-gradient(circle, #e0443d 0 45%, #fff 46% 55%, #e0443d 56%);
}
.slot-0 .pk-bet { left: 50%; top: -44px; transform: translateX(-50%); }
.slot-3 .pk-bet { left: 50%; bottom: -30px; transform: translateX(-50%); }
.slot-1 .pk-bet, .slot-2 .pk-bet { left: calc(100% + 6px); top: 40%; }
.slot-4 .pk-bet, .slot-5 .pk-bet { right: calc(100% + 6px); top: 40%; }

/* Мои карты крупно и кнопки */
.pk-me { display: flex; align-items: center; justify-content: center; gap: 18px; margin-top: 8px; }
.pk-hole { display: flex; gap: 8px; }
.pk-hole .pcard { --w: 64px; }
.pk-hole.folded { opacity: .4; filter: grayscale(.7); }
.hand-name {
  font-family: var(--display);
  font-weight: 800;
  font-size: 20px;
  background: var(--gold-grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.hint { margin: 4px 0 0; color: var(--muted); min-height: 1.4em; font-weight: 600; }

.pk-actions { display: flex; flex-direction: column; gap: 10px; margin-top: 16px; }
.pk-main-actions { display: flex; gap: 8px; }
.pk-main-actions button { flex: 1; min-height: 46px; font-family: var(--display); }
.pk-raise { display: flex; flex-direction: column; gap: 8px; }
.pk-raise-row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
#raise-slider { flex: 1 1 180px; padding: 0; border: 0; background: none; box-shadow: none; accent-color: var(--gold); height: 26px; }
#raise-amount { flex: 0 1 110px; }
#raise-btn { flex: 1 1 160px; }

.leave { display: block; margin: 16px auto 0; }
.rules { margin-top: 18px; color: var(--muted); font-size: 14px; }
.rules summary { cursor: pointer; font-weight: 700; color: var(--text); }
.rules .ranks { margin: 8px 0 0; padding-left: 20px; }

@media (max-width: 700px) {
  .ptable { aspect-ratio: 3 / 4; min-height: 420px; }
  .felt { inset: 16% 8%; border-width: 8px; }
  .pk-seat { width: 96px; padding: 5px 5px 6px; font-size: 12px; }
  .pk-name { max-width: 60px; }
  .pcard { --w: 34px; }
  .pcard.small { --w: 22px; }
  .pk-hole .pcard { --w: 54px; }
  .pk-board { gap: 4px; }
  /* Стол на четверых: боковые места выше общих карт, чтобы их не закрывать */
  .poker.bots .pk-seat.slot-1, .poker.bots .pk-seat.slot-4 { top: 27% !important; }
}

/* ---------- Боковая колонка ---------- */

.count {
  font-family: var(--font);
  font-size: 12px;
  font-weight: 800;
  background: rgba(69, 212, 131, .15);
  color: var(--green);
  border: 1px solid rgba(69, 212, 131, .35);
  border-radius: 999px;
  padding: 1px 9px;
}
.list { list-style: none; margin: 0; padding: 0; }
.list li {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 0;
  border-top: 1px solid var(--line-2);
}
.list li:first-child { border-top: 0; }
.list .name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.list li.self .name { color: var(--gold-2); }
.list li.self .name::after { content: " · ты"; color: var(--muted); font-weight: 500; }
/* Титул в узких списках (онлайн, рейтинг) — второй строкой под ником: в одну строку с балансом он не влезает
   и выталкивал сумму за край панели. Длинный обрезается многоточием, целиком — при наведении. */
.name-box { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 2px; }
.name-box .name { flex: none; max-width: 100%; }
.name-box .title-tag { margin: 0; max-width: 100%; overflow: hidden; text-overflow: ellipsis; font-size: 10px; line-height: 1.5; }
.leaderboard .badges, .leaderboard .score { flex: none; }
.avatar {
  flex: none;
  width: 28px; height: 28px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 13px;
  font-weight: 800;
  color: #fff;
  background: hsl(var(--h, 140) 55% 38%);
  box-shadow: inset 0 -2px 0 rgba(0, 0, 0, .25), 0 0 0 2px rgba(255, 255, 255, .08);
  text-transform: uppercase;
}
.leaderboard { counter-reset: place; }
.leaderboard li::before {
  counter-increment: place;
  content: counter(place);
  width: 22px;
  text-align: center;
  color: var(--muted);
  font-family: var(--display);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}
.leaderboard li:nth-child(1)::before { content: "🥇"; font-size: 17px; }
.leaderboard li:nth-child(2)::before { content: "🥈"; font-size: 17px; }
.leaderboard li:nth-child(3)::before { content: "🥉"; font-size: 17px; }
.leaderboard li.offline .name, .leaderboard li.offline .avatar { opacity: .5; }
.leaderboard .score { color: var(--gold-2); font-family: var(--display); font-weight: 600; font-size: 13px; font-variant-numeric: tabular-nums; }

/* ---------- Чат ---------- */

.chat-log {
  list-style: none;
  margin: 0 0 12px;
  padding: 0;
  max-height: 280px;
  overflow-y: auto;
  font-size: 14px;
  overflow-wrap: anywhere;
  scrollbar-width: thin;
  scrollbar-color: rgba(242, 193, 78, .3) transparent;
}
.chat-log li { padding: 5px 8px; border-radius: 10px; }
.chat-log li + li { margin-top: 2px; }
.chat-log li:hover { background: rgba(255, 255, 255, .03); }
.chat-log .time { color: var(--muted); font-size: 11px; margin-right: 6px; font-variant-numeric: tabular-nums; }
.chat-log .author { font-weight: 800; margin-right: 6px; color: #9ed8ff; }
.chat-log li.self .author { color: var(--gold-2); }
.chat-log .empty { color: var(--muted); }
.chat-log li.system { background: linear-gradient(90deg, rgba(69, 212, 131, .13), rgba(69, 212, 131, .03)); border-left: 3px solid var(--green); }
.chat-log li.system .author { color: var(--green); }
.chat-log li.system { white-space: pre-line; }
.chat-form { display: flex; gap: 6px; }
.chat-form input { padding: 9px 12px; font-size: 14px; }
.chat-form button { padding: 9px 14px; font-size: 14px; }

/* ---------- Музыка ---------- */

.music {
  position: fixed;
  left: 16px;
  bottom: 16px;
  z-index: 30;
  display: flex;
  align-items: center;
  gap: 12px;
  max-width: min(520px, calc(100vw - 32px));
  padding: 8px 16px 8px 10px;
  border-radius: 999px;
  background: rgba(10, 22, 15, .94);
  border: 1px solid rgba(242, 193, 78, .5);
  box-shadow: 0 12px 34px rgba(0, 0, 0, .55), 0 0 24px rgba(242, 193, 78, .15);
  font-size: 14px;
}
.music::before {
  content: "";
  flex: none;
  width: 32px; height: 32px;
  border-radius: 50%;
  background: radial-gradient(circle, #111 0 18%, var(--gold) 19% 24%, #1b1b1b 25% 100%);
  box-shadow: 0 0 0 2px rgba(242, 193, 78, .4);
  animation: vinyl 3s linear infinite;
}
@keyframes vinyl { to { transform: rotate(360deg); } }
.music.off { border-color: var(--line-2); opacity: .85; box-shadow: 0 12px 34px rgba(0, 0, 0, .55); }
.music.off::before { animation: none; opacity: .5; }
.music.off .volume, .music.off .volume-hint { display: none; }
.music-title { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 700; }
.music-play { padding: 6px 12px; font-size: 13px; }
.volume { display: flex; align-items: center; gap: 4px; flex: none; }
#music-volume { width: 120px; height: 24px; margin: 0; padding: 0; border: 0; background: none; box-shadow: none; cursor: pointer; accent-color: var(--gold); }
.volume-hint { font-size: 12px; white-space: nowrap; }
.music .link { white-space: nowrap; }

/* ---------- Объявления и эффекты ---------- */

.banner {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: grid;
  place-items: center;
  padding: 16px;
  background: radial-gradient(circle, rgba(0, 0, 0, .45), rgba(0, 0, 0, .8));
  animation: banner-in .35s ease-out;
  cursor: pointer;
}
.banner-text {
  max-width: 900px;
  padding: 32px 40px;
  border-radius: 24px;
  border: 2px solid var(--gold);
  background: linear-gradient(160deg, #173a28, #0a1d13);
  font-family: var(--display);
  font-size: clamp(26px, 6vw, 56px);
  font-weight: 800;
  text-align: center;
  overflow-wrap: anywhere;
  box-shadow: 0 0 80px rgba(242, 193, 78, .4);
  color: var(--gold-2);
}
@keyframes banner-in { from { opacity: 0; transform: scale(1.3); } to { opacity: 1; transform: none; } }

.fx-layer { position: fixed; inset: 0; z-index: 40; pointer-events: none; overflow: hidden; }
.fx-confetti, .fx-emoji { position: absolute; top: -40px; animation: fx-fall linear forwards; }
.fx-confetti { width: 10px; height: 16px; border-radius: 2px; }
.fx-emoji { font-size: 32px; }
@keyframes fx-fall { to { transform: translateY(110vh) rotate(var(--spin)); } }

body.fx-shake { animation: fx-shake .9s; }
@keyframes fx-shake {
  0%, 100% { transform: none; }
  10%, 50%, 90% { transform: translate(-14px, 6px) rotate(-1deg); }
  30%, 70% { transform: translate(14px, -6px) rotate(1deg); }
}
body.fx-flip { transform: rotate(180deg); transition: transform .6s; }
body.fx-disco { animation: fx-disco .5s linear infinite; }
@keyframes fx-disco { from { filter: hue-rotate(0deg) saturate(2); } to { filter: hue-rotate(360deg) saturate(2); } }

/* ---------- Мобильные ---------- */

@media (max-width: 960px) {
  .lobby { grid-template-columns: 1fr; }
  .side-col { position: static; }
}
@media (max-width: 700px) {
  main { padding: 14px 10px 90px; }
  .card { padding: 16px; border-radius: 16px; }
  .topbar { flex-wrap: wrap; gap: 8px 12px; padding: 10px 12px; }
  .logo { font-size: 20px; }
  .stage { height: 220px; }
  .wheel-box, .wheel-box canvas { width: 280px; height: 280px; }
  .music { left: 8px; right: 8px; bottom: 8px; max-width: none; }
  #music-volume { width: 90px; }
  .tab { padding: 8px 9px; font-size: 13px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

/* ---------- Фоновый джаз ---------- */

.lounge { position: fixed; right: 16px; bottom: 16px; z-index: 31; display: flex; flex-direction: column; align-items: flex-end; gap: 10px; }
.lounge-btn {
  position: relative;
  width: 46px; height: 46px;
  padding: 0;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: rgba(10, 22, 15, .85);
  border: 1px solid var(--line);
  color: var(--text);
  font-size: 20px;
  box-shadow: 0 8px 22px rgba(0, 0, 0, .45);
  opacity: .75;
  transition: opacity .2s, transform .15s;
}
.lounge-btn:not(:disabled):hover { opacity: 1; background: rgba(10, 22, 15, .95); box-shadow: 0 8px 22px rgba(0, 0, 0, .45); }
.lounge-btn.off { filter: grayscale(1); opacity: .5; }
.lounge-btn .eq { position: absolute; right: 6px; bottom: 7px; display: none; gap: 1.5px; align-items: flex-end; height: 10px; }
.lounge-btn.playing .eq { display: flex; }
.lounge-btn .eq i { width: 2.5px; height: 10px; background: var(--gold); border-radius: 1px; transform-origin: 50% 100%; animation: eq 1s ease-in-out infinite; }
.lounge-btn .eq i:nth-child(2) { animation-delay: -.35s; }
.lounge-btn .eq i:nth-child(3) { animation-delay: -.7s; }
@keyframes eq { 0%, 100% { transform: scaleY(.3); } 50% { transform: scaleY(1); } }

.lounge-panel {
  width: 240px;
  padding: 14px;
  border-radius: 16px;
  background: rgba(10, 22, 15, .97);
  border: 1px solid var(--line);
  box-shadow: 0 16px 40px rgba(0, 0, 0, .55);
  font-size: 14px;
  animation: toast-in .15s ease-out;
}
.lounge-head { font-family: var(--display); font-weight: 700; font-size: 13px; color: var(--gold-2); }
.lounge-track { margin: 6px 0 10px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lounge-row { display: flex; gap: 6px; }
.lounge-row button { padding: 8px 10px; font-size: 14px; }
.lounge-row #lounge-toggle { flex: 1; }
.lounge-vol { display: flex; align-items: center; gap: 6px; margin-top: 10px; color: var(--muted); }
#lounge-vol { padding: 0; border: 0; background: none; box-shadow: none; accent-color: var(--gold); height: 22px; }
.lounge-note { margin: 8px 0 0; min-height: 0; font-size: 12px; color: var(--muted); }
.lounge-note:empty { display: none; }

@media (max-width: 700px) {
  .lounge { right: 10px; bottom: 10px; }
  .has-music .lounge { bottom: 70px; }
}

/* ---------- Бомба в банке ---------- */

.b-stage { display: flex; align-items: center; gap: 28px; flex-wrap: wrap; margin-top: 4px; }
.b-bomb { position: relative; width: 190px; height: 200px; flex: none; margin: 0 auto; }
.b-body {
  position: absolute;
  left: 10px; bottom: 0;
  width: 170px; height: 170px;
  border-radius: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: radial-gradient(circle at 32% 28%, #5d6470 0, #262a31 22%, #0c0d10 60%, #000 100%);
  box-shadow: 0 18px 40px rgba(0, 0, 0, .6), inset -10px -14px 30px rgba(0, 0, 0, .7), inset 6px 8px 18px rgba(255, 255, 255, .06);
  transition: box-shadow .4s;
}
.b-body::before {
  /* горлышко */
  content: "";
  position: absolute;
  top: -12px; right: 34px;
  width: 34px; height: 24px;
  border-radius: 6px;
  background: linear-gradient(180deg, #5b616b, #1d2025);
  transform: rotate(32deg);
}
.b-label { font-size: 11px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .1em; }
#b-bank { font-family: var(--display); font-size: 34px; font-weight: 800; color: var(--gold-2); text-shadow: 0 0 18px rgba(242, 193, 78, .5); font-variant-numeric: tabular-nums; }
.b-fuse {
  position: absolute;
  top: 0; right: 4px;
  width: 52px; height: 42px;
  border-top: 4px solid #c9a56a;
  border-right: 4px solid #c9a56a;
  border-radius: 0 34px 0 0;
  transform: rotate(18deg);
}
.b-spark {
  position: absolute;
  top: -11px; left: -9px;
  width: 18px; height: 18px;
  border-radius: 50%;
  background: radial-gradient(circle, #fff 0 18%, #ffd34d 30%, #ff7a1a 55%, transparent 70%);
  opacity: 0;
}
.b-bomb.lit .b-spark { opacity: 1; animation: spark .18s infinite alternate; }
@keyframes spark { from { transform: scale(.8) rotate(0); } to { transform: scale(1.35) rotate(40deg); } }
.b-bomb[data-heat="1"] .b-body { animation: wobble 1.6s ease-in-out infinite; }
.b-bomb[data-heat="2"] .b-body { animation: wobble .8s ease-in-out infinite; box-shadow: 0 18px 40px rgba(0, 0, 0, .6), 0 0 30px rgba(255, 90, 40, .25), inset -10px -14px 30px rgba(0, 0, 0, .7); }
.b-bomb[data-heat="3"] .b-body { animation: wobble .35s ease-in-out infinite; box-shadow: 0 18px 40px rgba(0, 0, 0, .6), 0 0 50px rgba(255, 70, 30, .55), inset -10px -14px 30px rgba(0, 0, 0, .7); }
@keyframes wobble { 0%, 100% { transform: rotate(0); } 25% { transform: rotate(-2.5deg) scale(1.01); } 75% { transform: rotate(2.5deg) scale(1.01); } }
.b-bomb.bump #b-bank { animation: pop .35s; }
.b-bomb.exploded .b-body { animation: blown .6s forwards; }
.b-bomb.exploded .b-fuse { opacity: 0; }
@keyframes blown { 0% { transform: scale(1); } 40% { transform: scale(1.35); filter: brightness(3); } 100% { transform: scale(.9); opacity: .35; filter: grayscale(1); } }

.b-info { flex: 1 1 240px; display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.b-phase { font-family: var(--display); font-weight: 700; font-size: 17px; }
.b-timer { height: 8px; border-radius: 999px; background: rgba(255, 255, 255, .07); overflow: hidden; }
.b-timer i { display: block; height: 100%; width: 0; border-radius: inherit; background: var(--gold-grad); transition: width .2s linear; }
.b-timer i.hurry { background: linear-gradient(90deg, #ff8a7f, #e0443d); }
.b-result { font-weight: 700; color: var(--muted); min-height: 1.4em; }
.b-result.win { color: var(--green); }
.b-result.lose { color: var(--red); }

.b-players { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 8px; margin-top: 18px; }
.b-player {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-areas: "av name" "av sum" "av st";
  column-gap: 10px;
  padding: 10px 12px;
  border-radius: 12px;
  background: rgba(0, 0, 0, .3);
  border: 1px solid var(--line-2);
  font-size: 13px;
  transition: box-shadow .2s, transform .2s;
}
.b-player .avatar { grid-area: av; align-self: center; width: 34px; height: 34px; font-size: 15px; }
.b-name { grid-area: name; font-weight: 800; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.b-sum { grid-area: sum; color: var(--gold-2); font-variant-numeric: tabular-nums; }
.b-status { grid-area: st; color: var(--muted); }
.b-player.mine { border-color: rgba(242, 193, 78, .6); }
.b-player.turn { box-shadow: 0 0 0 2px #ff9b4a, 0 0 22px rgba(255, 120, 40, .45); transform: translateY(-2px); }
.b-player.out { opacity: .55; }
.b-player.boom { border-color: var(--red); background: rgba(239, 91, 84, .14); }
.b-player.boom .b-status { color: var(--red); font-weight: 800; }

.b-deposit { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; flex: 1 1 100%; }
.b-deposit .quick button { min-width: 50px; }
#b-amount { flex: 0 1 100px; }
#b-put { flex: 1 1 140px; }

.boom-flash {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: grid;
  place-items: center;
  font-size: min(40vw, 320px);
  pointer-events: none;
  background: radial-gradient(circle, rgba(255, 230, 150, .9), rgba(255, 90, 30, .55) 40%, transparent 75%);
  animation: boom 1.2s ease-out forwards;
}
@keyframes boom { 0% { opacity: 0; transform: scale(.3); } 12% { opacity: 1; transform: scale(1.1); } 100% { opacity: 0; transform: scale(1.6); } }

/* ---------- Апгрейдер ---------- */

.u-stage { display: flex; gap: 28px; align-items: center; flex-wrap: wrap; }
.u-wheel-box { position: relative; width: 280px; height: 280px; flex: none; margin: 0 auto; }
.u-wheel-box canvas { width: 280px; height: 280px; display: block; }
.u-center {
  position: absolute;
  inset: 0;
  margin: auto;
  width: 150px; height: 150px;
  border-radius: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: radial-gradient(circle at 40% 30%, rgba(69, 212, 131, .12), rgba(0, 0, 0, .4) 70%);
  border: 1px solid var(--line-2);
}
#u-chance-big { font-family: var(--display); font-size: 40px; font-weight: 800; color: var(--green); line-height: 1; text-shadow: 0 0 20px rgba(69, 212, 131, .5); }
#u-mult-big { margin-top: 6px; font-family: var(--display); font-size: 18px; font-weight: 700; color: var(--gold-2); }
.upgrader.won .u-center { box-shadow: 0 0 40px rgba(69, 212, 131, .55); border-color: var(--green); animation: pop .4s; }

.u-side { flex: 1 1 260px; display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.u-side .field { flex: none; }
.u-chance-label { color: var(--green); font-size: 14px; }
#u-chance { padding: 0; border: 0; background: none; box-shadow: none; accent-color: var(--green); height: 26px; }
.u-presets button.active { border-color: var(--green); color: var(--green); background: rgba(69, 212, 131, .1); }
.u-win { font-size: 15px; color: var(--muted); font-weight: 600; }
.u-win b { font-family: var(--display); font-size: 22px; color: var(--gold-2); }
#u-mult { color: var(--green); font-weight: 800; }
#u-go { flex: none; }
.u-result { min-height: 1.4em; font-family: var(--display); font-weight: 700; font-size: 18px; }
.u-result.win { color: var(--green); animation: pop .4s; }
.u-result.lose { color: var(--red); }

.u-feed-title { margin-top: 22px; font-size: 14px; color: var(--muted); }
.u-feed li { font-size: 14px; }
.u-feed .u-what { font-family: var(--display); font-weight: 600; font-size: 13px; font-variant-numeric: tabular-nums; }
.u-feed li.win .u-what { color: var(--green); }
.u-feed li.lose .u-what { color: var(--red); }
.u-feed .u-ch { min-width: 92px; text-align: right; color: var(--muted); font-size: 12px; }

/* ---------- Лента ставок и выигрышей ---------- */

.act-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-bottom: 8px; }
.act-head h2 { margin: 0; }
.act-filter { display: flex; gap: 4px; }
.act-filter button { padding: 6px 12px; font-size: 13px; }
.act-filter button.active { border-color: var(--gold); color: var(--gold-2); background: rgba(242, 193, 78, .1); }
.act-list { list-style: none; margin: 0; padding: 0; max-height: 360px; overflow-y: auto; scrollbar-width: thin; scrollbar-color: rgba(242, 193, 78, .3) transparent; }
.act-list li { display: flex; align-items: center; gap: 10px; padding: 7px 6px; border-top: 1px solid var(--line-2); border-radius: 8px; font-size: 14px; }
.act-list li:first-child { border-top: 0; }
.act-list li.self { background: rgba(242, 193, 78, .06); }
.act-list li.fresh { animation: act-in .5s ease-out; }
@keyframes act-in { from { opacity: 0; transform: translateY(-8px); background: rgba(242, 193, 78, .18); } }
.act-icon { flex: none; width: 22px; text-align: center; font-size: 16px; }
.act-list .avatar { width: 26px; height: 26px; font-size: 12px; }
.act-body { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.25; }
.act-body b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.act-what { color: var(--muted); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.act-amount { flex: none; font-family: var(--display); font-weight: 700; font-size: 14px; font-variant-numeric: tabular-nums; color: var(--gold-2); }
.act-win .act-amount { color: var(--green); }
.act-lose .act-amount { color: var(--red); }
.act-empty { justify-content: center; }

/* ---------- Пул ---------- */

.pl-sub { margin-top: 22px; font-size: 14px; color: var(--muted); }
.pl-invites { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; }
.pl-invites:empty { display: none; }
.pl-invite { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 10px 12px; border-radius: 12px; border: 1px solid rgba(242, 193, 78, .45); background: rgba(242, 193, 78, .08); font-weight: 600; }
.pl-invite span { flex: 1 1 200px; }
.pl-invite button { padding: 7px 14px; font-size: 14px; }
#pl-matches li button { padding: 6px 12px; font-size: 13px; }

/* ---------- Ставки зрителей (лобби дуэли и пула, под матчем) ---------- */
.pl-sub small { font-weight: 400; font-size: 12px; margin-left: 6px; opacity: .8; }
.sb-list { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; }
.sb-list[hidden] { display: none; }
.sb-in-match { margin: 12px auto 0; max-width: 560px; }
.sb-amount { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 13px; color: var(--muted); }
.sb-amount input { width: 120px; padding: 6px 10px; font-size: 14px; }
.sb-rows { display: flex; flex-direction: column; gap: 8px; }
.sb-row { padding: 10px 12px; border-radius: 12px; border: 1px solid var(--line); background: rgba(255, 255, 255, .03); }
.sb-row.over { opacity: .8; }
.sb-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; flex-wrap: wrap; font-size: 14px; }
.sb-head b { min-width: 0; overflow-wrap: anywhere; }
.sb-status { font-size: 12px; color: var(--muted); }
.sb-row.open .sb-status { color: var(--gold-2); }
.sb-sides { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 8px; }
.sb-side { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 8px 6px; min-width: 0; font-size: 13px; background: rgba(255, 255, 255, .05); color: var(--text); border: 1px solid var(--line-2); border-radius: 10px; box-shadow: none; }
.sb-side b { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sb-side .sb-odds { font-family: var(--display); font-size: 16px; color: var(--gold-2); }
.sb-side small { font-size: 11px; color: var(--muted); }
.sb-side:not(:disabled):hover { border-color: var(--gold); background: rgba(242, 193, 78, .1); }
.sb-side:disabled { cursor: default; opacity: .65; }
.sb-side.mine { border-color: var(--gold); opacity: 1; background: rgba(242, 193, 78, .12); }
.sb-side.won { border-color: var(--green); opacity: 1; }
.sb-foot { margin-top: 6px; font-size: 12px; color: var(--muted); }
.dv-wait { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; min-height: 180px; font-family: var(--display); font-size: 20px; }
.dv-wait b { font-size: 44px; color: var(--gold-2); }
.dv-wait small { font-family: var(--font); font-size: 13px; color: var(--muted); }

.pl-top { display: flex; align-items: stretch; gap: 10px; }
.pl-player {
  flex: 1 1 0;
  min-width: 0;
  padding: 8px 10px;
  border-radius: 12px;
  background: rgba(0, 0, 0, .3);
  border: 1px solid var(--line-2);
  transition: box-shadow .2s;
}
.pl-player.right { text-align: right; }
.pl-player.active { border-color: var(--gold-2); box-shadow: 0 0 0 2px rgba(242, 193, 78, .4), 0 0 18px rgba(242, 193, 78, .3); }
.pl-player.winner { border-color: var(--green); box-shadow: 0 0 0 2px var(--green), 0 0 20px rgba(69, 212, 131, .5); }
.pl-name { display: flex; align-items: center; gap: 6px; font-weight: 800; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pl-player.right .pl-name { flex-direction: row-reverse; }
.pl-name .avatar { width: 24px; height: 24px; font-size: 11px; }
.pl-group { color: var(--muted); font-size: 12px; margin-top: 2px; }
.pl-mini { display: flex; flex-wrap: wrap; gap: 3px; margin-top: 4px; min-height: 18px; }
.pl-player.right .pl-mini { justify-content: flex-end; }
.pl-mini span {
  width: 18px; height: 18px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 9px;
  font-weight: 800;
  color: #111;
  background: radial-gradient(circle, #fff 0 38%, var(--c) 40%);
}
.pl-mini span.stripe { background: radial-gradient(circle, #fff 0 38%, transparent 40%), linear-gradient(180deg, #fff 0 25%, var(--c) 25% 75%, #fff 75%); }
.pl-center { flex: 1 1 0; display: flex; flex-direction: column; justify-content: center; gap: 6px; text-align: center; min-width: 0; }
.pl-status { font-family: var(--display); font-weight: 700; font-size: 14px; }
.pl-msg { margin: 10px 0 6px; min-height: 1.4em; color: var(--gold-2); font-weight: 700; text-align: center; font-size: 14px; }
.pl-table-wrap { border-radius: 18px; overflow: hidden; box-shadow: 0 16px 40px rgba(0, 0, 0, .55); }
#pl-canvas { display: block; width: 100%; height: auto; touch-action: none; cursor: crosshair; }
.pl-power { height: 8px; margin-top: 10px; border-radius: 999px; background: rgba(255, 255, 255, .07); overflow: hidden; }
.pl-power i { display: block; height: 100%; width: 0; border-radius: inherit; background: linear-gradient(90deg, #45d483, #f2c14e 60%, #ef5b54); }
.pl-actions { justify-content: space-between; }

.pl-popup {
  position: fixed;
  top: 78px;
  left: 50%;
  z-index: 55;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  justify-content: center;
  max-width: calc(100vw - 24px);
  padding: 12px 16px;
  border-radius: 16px;
  background: rgba(10, 22, 15, .96);
  border: 1px solid var(--gold);
  box-shadow: 0 16px 40px rgba(0, 0, 0, .6), 0 0 30px rgba(242, 193, 78, .25);
  font-weight: 600;
  animation: toast-in .25s ease-out;
}
.pl-popup .row { margin: 0; gap: 6px; display: flex; }
.pl-popup button { padding: 8px 14px; font-size: 14px; }

@media (max-width: 700px) {
  .pl-top { flex-wrap: wrap; }
  .pl-center { order: -1; flex-basis: 100%; }
}

/* ---------- Верити ---------- */
.vt-strip span {
  min-width: 30px; text-align: center; font-size: 15px; line-height: 1;
}
.vt-strip span.vt-g { background: rgba(247, 207, 34, .12); border-color: rgba(247, 207, 34, .45); }
.vt-strip span.vt-e { background: rgba(212, 42, 28, .16); border-color: rgba(255, 90, 70, .45); }

.vt-stage {
  position: relative; overflow: hidden; border-radius: 18px;
  display: flex; flex-direction: column; align-items: center;
  padding: 14px 12px 0; min-height: 400px;
  background:
    radial-gradient(ellipse 60% 45% at 50% 42%, rgba(247, 207, 34, .14), transparent 70%),
    radial-gradient(ellipse 120% 70% at 50% 120%, #0f3a26, #0a1f16 60%, #090d0b);
  border: 1px solid var(--line);
  transition: background .6s;
}
.verity.evil-mood .vt-stage {
  background:
    radial-gradient(ellipse 60% 45% at 50% 42%, rgba(220, 40, 30, .25), transparent 70%),
    radial-gradient(ellipse 120% 70% at 50% 120%, #3a0f12, #1f0a0c 60%, #0d0909);
}

.vt-bubble {
  position: relative; z-index: 2; max-width: 92%;
  background: #fffaf0; color: #1a1408; font-weight: 700; font-size: 15px;
  padding: 9px 14px; border-radius: 16px; text-align: center;
  box-shadow: 0 6px 18px rgba(0, 0, 0, .35);
}
.vt-bubble::after {
  content: ''; position: absolute; left: 50%; bottom: -8px; margin-left: -8px;
  border: 8px solid transparent; border-bottom: 0; border-top-color: #fffaf0;
}
.vt-bubble.pop { animation: vt-pop .3s ease-out; }
.vt-bubble.think { background: #f3f0ff; color: #2a2346; }
.vt-bubble.think::after { border-top-color: #f3f0ff; }
.vt-bubble.good { background: #fff3b8; }
.vt-bubble.good::after { border-top-color: #fff3b8; }
.vt-bubble.evil { background: #2a0b0c; color: #ffb3a8; border: 1px solid #a3231c; }
.vt-bubble.evil::after { border-top-color: #2a0b0c; }
@keyframes vt-pop { from { transform: scale(.85); opacity: .3; } to { transform: scale(1); opacity: 1; } }

.vt-float { margin-top: 18px; animation: vt-float 3.2s ease-in-out infinite; }
@keyframes vt-float { 50% { transform: translateY(-8px); } }

.vt-hero { width: 230px; height: 230px; transition: filter .4s; }
.vt-hero svg { width: 100%; height: 100%; display: block; overflow: visible; }

/* Какая сторона монетки сейчас видна. */
.vt-face-evil, .vt-redskin, .vt-horns { opacity: 0; }
.vt-hero[data-side="evil"] .vt-face-good { opacity: 0; }
.vt-hero[data-side="evil"] .vt-face-evil,
.vt-hero[data-side="evil"] .vt-redskin,
.vt-hero[data-side="evil"] .vt-horns { opacity: 1; }

.vt-eyes-happy, .vt-blush, .vt-mouth-open, .vt-maw { opacity: 0; }
.vt-hero.happy .vt-eyes, .vt-hero.happy .vt-smile { opacity: 0; }
.vt-hero.happy .vt-eyes-happy, .vt-hero.happy .vt-mouth-open { opacity: 1; }
.vt-hero.happy .vt-blush { opacity: .55; }
.vt-hero.eat .vt-grin { opacity: 0; }
.vt-hero.eat .vt-maw { opacity: 1; }

.vt-eyes, .vt-maw, .vt-horns, .vt-glint { transform-box: fill-box; transform-origin: center; }
.vt-hero.idle .vt-eyes { animation: vt-blink 4.6s infinite; }
@keyframes vt-blink { 0%, 93%, 100% { transform: scaleY(1); } 96% { transform: scaleY(.1); } }

.vt-hero.idle { animation: vt-sway 5s ease-in-out infinite; }
@keyframes vt-sway { 25% { transform: rotate(-4deg); } 75% { transform: rotate(4deg); } }

.vt-hero.happy { filter: drop-shadow(0 0 26px rgba(255, 214, 60, .75)); }
.vt-hero.jump { animation: vt-jump .55s ease-out 3; }
@keyframes vt-jump {
  0% { transform: translateY(0) scale(1.08, .9); }
  40% { transform: translateY(-34px) scale(.95, 1.06); }
  80% { transform: translateY(0) scale(1.06, .94); }
  100% { transform: translateY(0) scale(1); }
}

.vt-hero.grin, .vt-hero.burp { filter: drop-shadow(0 0 30px rgba(255, 40, 20, .7)); }
.vt-hero.grin .vt-horns { animation: vt-horns .35s ease-out; }
@keyframes vt-horns { from { transform: scale(.2) translateY(30px); } to { transform: scale(1) translateY(0); } }
.vt-hero.grin .vt-glint { animation: vt-glint 1s ease-in-out infinite; }
@keyframes vt-glint { 50% { transform: scale(1.6); fill: #ff3b2f; } }
.vt-hero.eat .vt-maw { animation: vt-open .22s ease-out; }
.vt-hero.chomp .vt-maw { animation: vt-chomp .26s ease-in-out infinite; }
@keyframes vt-open { from { transform: scaleY(.15); } to { transform: scaleY(1); } }
@keyframes vt-chomp { 0%, 100% { transform: scaleY(1); } 50% { transform: scaleY(.15); } }
.vt-hero.burp { animation: vt-burp .7s ease-in-out; }
@keyframes vt-burp {
  0%, 100% { transform: none; }
  15% { transform: translateX(-7px) rotate(-5deg); } 30% { transform: translateX(7px) rotate(5deg); }
  45% { transform: translateX(-5px) rotate(-3deg) scale(1.08); } 60% { transform: translateX(4px) rotate(2deg) scale(1.08); }
}

.vt-table {
  position: relative; width: min(340px, 92%); height: 92px; margin-top: auto;
  background: radial-gradient(ellipse 50% 40% at 50% 55%, rgba(0, 0, 0, .35), transparent 70%);
}
.vt-pile { position: absolute; left: 50%; bottom: 34px; width: 34px; height: 60px; margin-left: -17px; }
.vt-pile-label {
  position: absolute; left: 0; right: 0; bottom: 8px; text-align: center;
  font: 700 15px var(--display); color: var(--gold-2); transition: opacity .3s;
}
.vt-pile-label.good { color: var(--green); text-shadow: 0 0 12px rgba(69, 212, 131, .6); }
.vt-pile-label.gone { opacity: 0; }

.vt-chip, .vt-coin { position: absolute; left: 0; top: 0; pointer-events: none; }
.vt-pile .vt-chip { top: auto; }
.vt-chip {
  width: 34px; height: 12px; border-radius: 50%;
  background: radial-gradient(ellipse at 50% 40%, #e44b3c 45%, #9c1d14 46% 55%, #e44b3c 56%);
  border: 2px dashed #fff3e0; box-shadow: 0 3px 0 #6b120c, 0 4px 6px rgba(0, 0, 0, .4);
}
.vt-chip.alt { background: radial-gradient(ellipse at 50% 40%, #2b6fd6 45%, #183f7c 46% 55%, #2b6fd6 56%); box-shadow: 0 3px 0 #10305e, 0 4px 6px rgba(0, 0, 0, .4); }
.vt-chip.alt2 { background: radial-gradient(ellipse at 50% 40%, #1f9e5a 45%, #0e5c33 46% 55%, #1f9e5a 56%); box-shadow: 0 3px 0 #0a4123, 0 4px 6px rgba(0, 0, 0, .4); }
.vt-chip.drop { animation: vt-drop .35s cubic-bezier(.3, 1.4, .6, 1) backwards; }
@keyframes vt-drop { from { transform: translateY(-60px); opacity: 0; } }
.vt-chip.fly { z-index: 3; }

.vt-coin {
  z-index: 3; width: 20px; height: 20px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #fff6b0, #f7cf22 45%, #b37a00 100%);
  border: 2px solid #ffe680; box-shadow: 0 0 10px rgba(255, 210, 60, .7);
}

.vt-controls {
  display: grid; grid-template-columns: 1fr auto; gap: 10px 12px; align-items: end; margin-top: 14px;
}
.vt-controls .field { margin: 0; }
.vt-controls .action { grid-column: 1 / -1; }
.vt-odds { grid-column: 1 / -1; color: var(--muted); font-size: 13px; text-align: center; }
.vt-controls .u-result { grid-column: 1 / -1; }
.vt-series {
  grid-column: 1 / -1; display: flex; flex-direction: column; gap: 10px;
  padding: 14px; border-radius: 16px;
  border: 1px solid rgba(255, 150, 60, .5);
  background: radial-gradient(ellipse at 50% 0%, rgba(255, 120, 40, .22), transparent 70%), rgba(0, 0, 0, .25);
  animation: pop .35s ease-out;
}
.vt-series-title { font-weight: 700; color: #ffc48a; font-size: 14px; text-align: center; }
.vt-ladder { display: flex; gap: 6px; justify-content: center; flex-wrap: wrap; }
.vt-ladder span {
  padding: 3px 10px; border-radius: 999px; font-family: var(--display); font-size: 13px; font-weight: 700;
  color: var(--muted); border: 1px solid var(--line-2); background: rgba(255, 255, 255, .03);
}
.vt-ladder span.done { color: #ffd2a6; border-color: rgba(255, 150, 60, .4); }
.vt-ladder span.now { color: #2a1200; background: linear-gradient(180deg, #ffd27a, #ff8a1f); border-color: #ffd27a; box-shadow: 0 0 14px rgba(255, 140, 40, .6); }
.vt-ladder span.next { color: #ffb36b; border-color: #ff8a1f; border-style: dashed; animation: vt-next 1.2s infinite; }
@keyframes vt-next { 50% { box-shadow: 0 0 12px rgba(255, 140, 40, .55); } }
.vt-series-buttons { display: grid; grid-template-columns: 1fr auto; gap: 8px; }
.vt-series-go { background: linear-gradient(180deg, #ffd27a, #ff8a1f 55%, #d9520b); color: #2a1200; }

@media (max-width: 560px) {
  .vt-stage { min-height: 350px; }
  .vt-hero { width: 190px; height: 190px; }
  .vt-controls { grid-template-columns: 1fr; }
}

/* Пул: винт */
.pl-controls { display: flex; align-items: center; gap: 10px; margin-top: 10px; }
.pl-controls .pl-power { flex: 1; margin-top: 0; }
.pl-spin {
  position: relative; flex: none; width: 50px; height: 50px; padding: 0; border-radius: 50%;
  background: radial-gradient(circle at 38% 32%, #fff, #e9e4d6 55%, #b9b29f);
  border: 2px solid rgba(255, 255, 255, .25); box-shadow: 0 3px 10px rgba(0, 0, 0, .45);
  cursor: ns-resize; touch-action: none;
}
.pl-spin::before {
  content: ''; position: absolute; left: 50%; top: 7px; bottom: 7px; width: 1px; margin-left: -.5px;
  background: rgba(0, 0, 0, .15);
}
.pl-spin i {
  position: absolute; left: 50%; top: 50%; width: 12px; height: 12px; margin: -6px 0 0 -6px; border-radius: 50%;
  background: #d8352b; box-shadow: 0 0 0 2px rgba(255, 255, 255, .8); transition: transform .12s;
}
.pl-spin.top i { background: #2c9e5a; }
.pl-spin.back i { background: #2b6fd6; }
.pl-spin-label { display: flex; flex-direction: column; min-width: 112px; line-height: 1.2; }
.pl-spin-label span { color: var(--muted); font-size: 11px; text-transform: uppercase; letter-spacing: .08em; }
.pl-spin-label b { font-size: 13px; }

/* ---------- Достижения и неделя ---------- */
.ach-btn { text-decoration: none; font-size: 13px; padding: 4px 9px; border-radius: 999px; border: 1px solid var(--line-2); background: rgba(255, 255, 255, .04); }
.ach-btn b { color: var(--gold-2); }
.rank-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 8px; flex-wrap: wrap; }
.rank-head h2 { margin: 0; }
.seg { display: flex; gap: 2px; padding: 3px; border-radius: 10px; background: rgba(0, 0, 0, .3); border: 1px solid var(--line-2); }
.seg button {
  padding: 4px 8px; border-radius: 7px; background: transparent; color: var(--muted);
  font-size: 12px; font-weight: 700; box-shadow: none; border: 0;
}
.seg button:not(:disabled):hover { color: var(--text); background: rgba(255, 255, 255, .05); filter: none; box-shadow: none; }
.seg button.active, .seg button.active:not(:disabled):hover { background: var(--gold-grad); color: #2a1b02; }
.list li.clickable, .hall-row.clickable { cursor: pointer; }
.list li.clickable:hover .name, .hall-row.clickable:hover .name { color: var(--gold-2); }
.leaderboard .badges { font-size: 12px; color: var(--muted); white-space: nowrap; }
.score.plus { color: var(--green); }
.score.minus { color: var(--red); }
.week-info { margin: 0 0 6px; color: var(--muted); font-size: 12px; }
#week-box .week-info:last-child { margin: 8px 0 0; }
.week-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 2px 10px; margin-bottom: 6px; }
.week-head .week-info { margin: 0; }
.week-timer { margin: 0; font-size: 13px; font-weight: 800; color: var(--gold-2); font-variant-numeric: tabular-nums; white-space: nowrap; }
.week-prizes { margin: 0 0 8px; padding: 6px 10px; border-radius: 10px; background: rgba(255, 200, 60, .07); border: 1px solid rgba(255, 200, 60, .18); font-size: 12px; font-weight: 700; }
.hall-row .prize { color: var(--gold-2); font-size: 11px; font-weight: 700; white-space: nowrap; }
.hall { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.hall > li { padding: 10px 12px; border-radius: 12px; background: rgba(255, 255, 255, .03); border: 1px solid var(--line); }
.hall > li.muted { background: none; border: 0; padding: 4px 0; }
.hall .hall-week { font-size: 12px; color: var(--muted); margin-bottom: 4px; }
.hall-row { display: flex; align-items: center; gap: 8px; padding: 3px 0; }
.hall-row .name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }

.modal {
  position: fixed; inset: 0; z-index: 60; display: grid; place-items: center; padding: 16px;
  background: rgba(3, 8, 6, .8);
}
.modal-card {
  position: relative; width: min(640px, 100%); max-height: calc(100vh - 32px); overflow: auto;
  padding: 22px; border-radius: 20px; background: var(--card); border: 1px solid var(--line-2);
  box-shadow: 0 30px 80px rgba(0, 0, 0, .6); animation: vt-pop .25s ease-out;
}
.modal-x { position: absolute; top: 12px; right: 12px; width: 34px; height: 34px; padding: 0; border-radius: 50%; }
.prof-head { display: flex; align-items: center; gap: 14px; padding-right: 40px; }
.prof-head .avatar { width: 52px; height: 52px; font-size: 22px; }
.prof-head h3 { margin: 0; font-family: var(--display); font-size: 20px; }
.prof-head p { margin: 4px 0 0; color: var(--muted); font-size: 13px; }
.prof-progress { display: flex; align-items: center; gap: 10px; margin: 16px 0 14px; font-size: 13px; color: var(--muted); white-space: nowrap; }
.prof-progress .bar { flex: 1; height: 8px; border-radius: 999px; background: rgba(255, 255, 255, .07); overflow: hidden; }
.prof-progress .bar i { display: block; height: 100%; width: 0; border-radius: inherit; background: var(--gold-grad); transition: width .5s; }
.ach-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 8px; }
.ach-grid li { display: flex; gap: 10px; align-items: center; padding: 10px; border-radius: 12px; border: 1px solid var(--line); background: rgba(255, 255, 255, .03); }
.ach-grid li.got { border-color: rgba(242, 193, 78, .45); background: linear-gradient(135deg, rgba(242, 193, 78, .12), rgba(255, 255, 255, .02)); }
.ach-grid li.locked { opacity: .6; }
.ach-grid li.locked .ach-icon { filter: grayscale(1) brightness(1.3); opacity: .7; }
.ach-icon { flex: none; width: 40px; height: 40px; display: grid; place-items: center; font-size: 22px; border-radius: 12px; background: rgba(0, 0, 0, .3); }
.ach-grid div { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.ach-grid b { font-size: 14px; }
.ach-grid span { font-size: 12px; color: var(--muted); }
.ach-grid small { font-size: 11px; color: var(--gold-2); margin-top: 2px; }

.ach-pop {
  position: fixed; z-index: 70; left: 50%; top: 18px; display: flex; align-items: center; gap: 14px;
  width: max-content; max-width: calc(100vw - 32px); min-width: min(340px, calc(100vw - 32px));
  padding: 14px 18px; border-radius: 18px;
  background: linear-gradient(135deg, #2b2208, #14110a); border: 1px solid rgba(242, 193, 78, .6);
  box-shadow: 0 18px 50px rgba(0, 0, 0, .55), 0 0 30px rgba(242, 193, 78, .25);
  transform: translate(-50%, -160%); transition: transform .45s cubic-bezier(.2, 1.3, .4, 1);
}
.ach-pop.show { transform: translate(-50%, 0); }
.ach-pop-icon { font-size: 34px; animation: ach-bounce 1s ease-in-out infinite; }
.ach-pop div { display: flex; flex-direction: column; line-height: 1.25; }
.ach-pop small { color: var(--gold-2); font-size: 11px; text-transform: uppercase; letter-spacing: .1em; }
.ach-pop b { font-family: var(--display); font-size: 17px; }
.ach-pop span { color: var(--muted); font-size: 13px; }
@keyframes ach-bounce { 50% { transform: translateY(-5px) rotate(-8deg) scale(1.1); } }

/* ---------- Подтверждение ставки ---------- */
#bet-confirm { z-index: 80; }
.bet-card { width: min(380px, 100%); text-align: center; padding: 24px 22px 18px; }
.bc-game { font-size: 13px; color: var(--muted); font-weight: 700; letter-spacing: .04em; }
.bet-card h3 { margin: 6px 0 10px; font-family: var(--display); font-size: 18px; }
.bc-amount b { font-family: var(--display); font-size: 34px; color: var(--gold-2); }
.bc-amount span { color: var(--muted); }
.bc-note { margin: 8px 0 0; font-size: 14px; }
.bc-share { margin: 6px 0 0; font-size: 13px; color: var(--muted); }
.bc-share.warn { color: var(--red); font-weight: 700; }
.bc-actions { display: grid; grid-template-columns: 1fr 1.4fr; gap: 10px; margin-top: 18px; }
.bc-opt { margin: 14px 0 0; font-size: 12px; color: var(--muted); }

/* ---------- Дуэль на везение ---------- */
.dv-form { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; align-items: end; margin-top: 12px; }
.dv-form .dv-games-field { grid-column: 1 / -1; }
.dv-form .action { grid-column: 1 / -1; }
.dv-games { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px; margin-top: 4px; }
.dv-games button {
  display: flex; flex-direction: column; align-items: flex-start; gap: 3px; text-align: left;
  padding: 10px 12px; border-radius: 12px; background: rgba(255, 255, 255, .03); border: 1px solid var(--line-2);
  color: var(--text); box-shadow: none;
}
.dv-games button small { color: var(--muted); font-size: 12px; font-weight: 500; line-height: 1.25; }
.dv-games button:not(:disabled):hover { background: rgba(255, 255, 255, .06); filter: none; box-shadow: none; }
.dv-games button.active { border-color: var(--gold); background: rgba(242, 193, 78, .1); box-shadow: 0 0 0 1px var(--gold) inset; }
.dv-history li .dv-h-game { color: var(--muted); font-size: 13px; white-space: nowrap; }

.dv-head { display: grid; grid-template-columns: 1fr auto 1fr; gap: 12px; align-items: center; }
.dv-player {
  display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 14px; min-width: 0;
  background: rgba(255, 255, 255, .03); border: 2px solid var(--pc, var(--line-2));
}
.dv-player.right { flex-direction: row-reverse; text-align: right; }
.dv-player .name { font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dv-player .dv-tag { font-size: 12px; color: var(--muted); }
.dv-player > div { display: flex; flex-direction: column; min-width: 0; }
.dv-player.win { box-shadow: 0 0 26px var(--pc); background: rgba(255, 255, 255, .06); }
.dv-player.lose { opacity: .55; }
.dv-vs { display: flex; flex-direction: column; align-items: center; gap: 2px; text-align: center; }
.dv-vs b { font-family: var(--display); font-size: 15px; }
.dv-vs span { color: var(--gold-2); font-weight: 700; font-size: 13px; white-space: nowrap; }
.dv-rule { text-align: center; color: var(--muted); font-size: 13px; margin: 10px 0 6px; }

.dv-stage {
  position: relative; display: flex; justify-content: center; align-items: center; gap: 18px; flex-wrap: wrap;
  min-height: 280px; padding: 14px; border-radius: 16px; border: 1px solid var(--line);
  background: radial-gradient(ellipse at 50% 40%, rgba(255, 255, 255, .04), transparent 70%), rgba(0, 0, 0, .25);
}
.dv-crash-canvas { width: 100%; height: 280px; display: block; }
.dv-col { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.dv-col canvas { width: 200px; height: 200px; display: block; }
.dv-col .dv-col-name { font-weight: 700; color: var(--pc); }
.dv-num {
  min-width: 52px; padding: 4px 12px; border-radius: 999px; text-align: center;
  font-family: var(--display); font-size: 22px; font-weight: 700; color: #fff; visibility: hidden;
}
.dv-num.show { visibility: visible; animation: pop .35s; }
.dv-num.red { background: linear-gradient(180deg, #e0443d, #a8231d); }
.dv-num.black { background: linear-gradient(180deg, #2b2b2b, #0e0e0e); }
.dv-num.green { background: linear-gradient(180deg, #1fa35c, #0d6b39); }
.dv-up-canvas { width: 280px; height: 280px; display: block; }
.dv-up-legend { display: flex; flex-direction: column; gap: 8px; min-width: 180px; }
.dv-up-legend div { display: flex; align-items: center; gap: 8px; font-size: 14px; }
.dv-up-legend i { width: 12px; height: 12px; border-radius: 50%; flex: none; }
.dv-up-legend span { color: var(--muted); }

.dv-face { width: 130px; height: 130px; }
.dv-face svg { transition: transform .2s; }
.dv-face.dv-toss svg { animation: dv-toss 1.4s cubic-bezier(.2, .8, .3, 1); }
@keyframes dv-toss {
  0% { transform: translateY(0) rotateY(0); }
  40% { transform: translateY(-34px) rotateY(900deg); }
  100% { transform: translateY(0) rotateY(1800deg); }
}
.dv-rounds { display: flex; gap: 4px; min-height: 22px; font-size: 16px; }
.dv-verity-msg { width: 100%; text-align: center; font-weight: 700; min-height: 24px; }

.dv-result { text-align: center; font-family: var(--display); font-size: 20px; margin-top: 14px; min-height: 28px; }
.dv-result.win { color: var(--green); }
.dv-result.lose { color: var(--red); }
.dv-actions { justify-content: center; margin-top: 10px; }

@media (max-width: 560px) {
  .dv-form { grid-template-columns: 1fr; }
  .dv-head { grid-template-columns: 1fr 1fr; }
  .dv-vs { grid-column: 1 / -1; grid-row: 1; }
  .dv-col canvas { width: 150px; height: 150px; }
  .dv-face { width: 110px; height: 110px; }
  .dv-up-canvas { width: 240px; height: 240px; }
}

/* ---------- Плинко ---------- */
.pk-wrap { display: grid; grid-template-columns: 230px 1fr; gap: 18px; align-items: start; }
.pk-side { display: flex; flex-direction: column; gap: 12px; }
.pk-side .field { margin: 0; }
.pk-seg { display: grid; grid-template-columns: repeat(3, 1fr); }
.pk-seg button { padding: 7px 4px; font-size: 13px; }
.pk-seg button:disabled { opacity: .5; }
.pk-side #pk-auto.on { border-color: var(--gold); color: var(--gold-2); }
.pk-last { min-height: 24px; font-family: var(--display); font-size: 16px; text-align: center; }
.pk-last.win { color: var(--green); }
.pk-last.lose { color: var(--muted); }
.pk-board {
  border-radius: 16px; border: 1px solid var(--line); padding: 6px;
  background: radial-gradient(ellipse at 50% 0%, rgba(242, 193, 78, .08), transparent 60%), rgba(0, 0, 0, .25);
}
.pk-board canvas, .dv-pk-canvas { width: 100%; max-width: 520px; margin: 0 auto; display: block; }
.dv-pk-canvas { max-width: 520px; }
.pk-strip span { min-width: 44px; text-align: center; color: #1b1203; font-weight: 800; border-color: transparent; }

/* Доске нужна ширина: на узких экранах она сверху во всю карточку, настройки под ней. */
@media (max-width: 1100px) {
  .pk-wrap { grid-template-columns: 1fr; }
  .pk-board { order: -1; }
  .pk-side { display: grid; grid-template-columns: 1fr 1fr; align-items: end; }
  .pk-side .action, .pk-side #pk-auto, .pk-side .pk-last { grid-column: 1 / -1; }
}
@media (max-width: 560px) {
  .pk-side { grid-template-columns: 1fr; }
}

/* ---------- Мины ---------- */
.mn-wrap { display: grid; grid-template-columns: 240px 1fr; gap: 20px; align-items: start; }
.mn-side { display: flex; flex-direction: column; gap: 12px; }
.mn-side .field { margin: 0; }
.mn-side input[type="range"] { width: 100%; accent-color: var(--red); }
.mn-presets { display: grid; grid-template-columns: repeat(5, 1fr); margin-top: 6px; }
.mn-presets button { padding: 6px 2px; font-size: 13px; }
.mn-info { display: grid; gap: 6px; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--line); background: rgba(0, 0, 0, .2); }
.mn-info div { display: flex; justify-content: space-between; gap: 8px; font-size: 14px; }
.mn-info span { color: var(--muted); }
.mn-info b { font-family: var(--display); }
#mn-payout { color: var(--green); }
.minesgame.playing #mn-go { background: linear-gradient(180deg, #5ee69b, #1f9a55); color: #06200f; }

.mn-grid {
  display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; max-width: 460px; width: 100%; margin: 0 auto;
  padding: 12px; border-radius: 18px; border: 1px solid var(--line);
  background: radial-gradient(ellipse at 50% 30%, rgba(255, 255, 255, .05), transparent 70%), rgba(0, 0, 0, .25);
}
.minesgame.shake .mn-grid { animation: mn-shake .45s; }
@keyframes mn-shake {
  20% { transform: translateX(-8px) rotate(-1deg); } 40% { transform: translateX(7px) rotate(1deg); }
  60% { transform: translateX(-5px); } 80% { transform: translateX(3px); }
}
.mn-tile {
  aspect-ratio: 1; padding: 0; border-radius: 12px; font-size: clamp(20px, 5vw, 32px);
  display: grid; place-items: center; cursor: default;
  background: linear-gradient(180deg, #2a3d33, #1b2a22); border: 1px solid rgba(255, 255, 255, .08);
  box-shadow: inset 0 -4px 0 rgba(0, 0, 0, .35), 0 3px 8px rgba(0, 0, 0, .3);
  transition: transform .12s, background .2s;
}
.minesgame.playing .mn-tile.closed { cursor: pointer; }
.minesgame.playing .mn-tile.closed:hover { transform: translateY(-2px); background: linear-gradient(180deg, #34503f, #22362b); box-shadow: inset 0 -4px 0 rgba(0, 0, 0, .35), 0 0 14px rgba(242, 193, 78, .25); }
.mn-tile.wait { animation: mn-wait .5s ease-in-out infinite alternate; }
@keyframes mn-wait { to { transform: scale(.92); } }
.mn-tile.gem {
  background: radial-gradient(circle at 50% 40%, rgba(94, 230, 155, .35), rgba(20, 60, 40, .9));
  border-color: rgba(94, 230, 155, .6); box-shadow: 0 0 18px rgba(94, 230, 155, .35);
  animation: mn-flip .35s ease-out;
}
.mn-tile.boom {
  background: radial-gradient(circle at 50% 45%, #ff8a5c, #b3221a 60%, #3a0806);
  border-color: #ff6b4a; box-shadow: 0 0 26px rgba(255, 70, 40, .8);
  animation: mn-flip .3s ease-out;
}
.mn-tile.mine-dim { background: rgba(120, 30, 25, .35); opacity: .75; animation: mn-flip .3s ease-out; }
.mn-tile.gem-dim { opacity: .35; }
@keyframes mn-flip { 0% { transform: rotateY(90deg) scale(.8); } 100% { transform: rotateY(0) scale(1); } }

@media (max-width: 760px) {
  .mn-wrap { grid-template-columns: 1fr; }
  .mn-grid { order: -1; }
}

/* ---------- Вход и пароль ---------- */
.login-form { display: grid; grid-template-columns: 1fr 1fr auto; gap: 8px; }
.login-hint { margin: 10px 0 0; }
.pw-card { display: flex; flex-direction: column; gap: 10px; border-color: rgba(242, 193, 78, .55); background: linear-gradient(135deg, rgba(242, 193, 78, .1), rgba(255, 255, 255, .02)); }
.pw-card h2 { margin: 0 0 4px; }
.pw-card p { margin: 0; }
.pw-card .row { margin: 0; flex-wrap: wrap; }
.pw-card input { flex: 1 1 200px; }
@media (max-width: 560px) {
  .login-form { grid-template-columns: 1fr; }
}

/* ---------- Главная: три раздела игр ---------- */
/* Казино — фишки на сукне, соревнования — красный против синего, слоты — окошки с живыми символами. */

.tab-home { align-self: center; }
.logo[role="link"] { cursor: pointer; border-radius: 10px; }
.logo[role="link"]:focus-visible { outline: 2px solid var(--gold-2); outline-offset: 4px; }

.home { display: flex; flex-direction: column; gap: 30px; container-type: inline-size; }
.home-head { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 14px; margin-bottom: 12px; }
.home-head h2 { margin: 0; font-size: 22px; }
.home-note { margin: 0; color: var(--muted); font-size: 13px; }
.home-casino .home-head h2 { color: var(--gold-2); }
.home-versus .home-head h2 { background: linear-gradient(90deg, #ff6a7a, #8fb4ff); -webkit-background-clip: text; background-clip: text; color: transparent; }
.home-slots .home-head h2 { color: #8ff0e4; }

.home-grid { display: grid; gap: 12px; }
/* Полные ряды: 8 игр против зала — 4+4; в соревнованиях «Лихие» на две клетки, и 7 игр ложатся 4+4. */
.home-casino .home-grid, .home-versus .home-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.home-versus [data-go="likhie"] { grid-column: span 2; }
.home-slots .home-grid { grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); }
@container (max-width: 640px) {
  .home-casino .home-grid, .home-versus .home-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* Витрина «С чего начать»: пять одинаковых карточек в ряд — сукно, золотая линейная иконка в кольце,
   название, подпись и «Играть» внизу. Вся карточка — кнопка. Узко — ряд листается вбок, без сирот. */
.home-feat .home-head h2 { color: var(--gold-2); }
.feat-row { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; }
.feat-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  min-width: 0;
  padding: 20px 12px 16px;
  border: 1px solid rgba(242, 193, 78, .28);
  border-radius: 16px;
  background:
    radial-gradient(120% 70% at 50% 0%, rgba(255, 255, 255, .06), transparent 60%),
    linear-gradient(180deg, #13472f, #0b2e1d);
  box-shadow: 0 10px 22px rgba(0, 0, 0, .4), inset 0 1px 0 rgba(255, 223, 138, .12);
  color: var(--text);
  font-weight: 500;
  text-align: center;
  transition: transform .18s, box-shadow .18s, border-color .18s;
}
.feat-card:not(:disabled):hover {
  transform: translateY(-3px);
  filter: none;
  border-color: rgba(242, 193, 78, .6);
  box-shadow: 0 16px 30px rgba(0, 0, 0, .5), inset 0 1px 0 rgba(255, 223, 138, .2);
}
.feat-card:not(:disabled):active { transform: translateY(-1px) scale(.99); }
.feat-icon {
  display: grid;
  place-items: center;
  width: 68px;
  height: 68px;
  margin-bottom: 8px;
  border-radius: 50%;
  border: 1.5px solid rgba(242, 193, 78, .55);
  background: radial-gradient(circle at 50% 35%, #0f3a26, #072016);
  box-shadow: 0 0 0 4px rgba(0, 0, 0, .18), inset 0 2px 8px rgba(0, 0, 0, .45);
  color: var(--gold-2);
  transition: border-color .18s, box-shadow .18s;
}
.feat-icon svg {
  width: 36px;
  height: 36px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform .25s;
}
.feat-icon .fill { fill: currentColor; stroke: none; }
.feat-icon .cut { fill: #0b2b1c; }   /* передняя карта прячет линии задней */
.feat-card:hover .feat-icon, .feat-card:focus-visible .feat-icon { border-color: var(--gold); box-shadow: 0 0 0 4px rgba(0, 0, 0, .18), 0 0 18px rgba(242, 193, 78, .3), inset 0 2px 8px rgba(0, 0, 0, .45); }
.feat-card:hover .feat-icon svg, .feat-card:focus-visible .feat-icon svg { transform: scale(1.08); }
.feat-name { font-family: var(--display); font-weight: 700; font-size: 16px; line-height: 1.2; }
.feat-text { font-size: 13px; line-height: 1.35; color: rgba(243, 239, 226, .72); }
.feat-play {
  margin-top: auto;
  padding: 6px 18px;
  border-radius: 999px;
  background: var(--gold-grad);
  color: #2a1b02;
  font-family: var(--display);
  font-size: 12px;
  font-weight: 700;
  box-shadow: 0 4px 12px rgba(242, 193, 78, .25);
}
/* Узко: ряд листается пальцем, видно две с половиной карточки — понятно, что дальше есть ещё. */
@container (max-width: 679px) {
  .feat-row {
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: minmax(150px, 42%);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    margin: -6px -16px 0;
    padding: 6px 16px 10px;
    scroll-padding: 0 16px;
  }
  .feat-row::-webkit-scrollbar { display: none; }
  .feat-card { scroll-snap-align: start; }
}
@media (max-width: 699px) {   /* у main здесь поля 10px — ряд листается от края до края экрана */
  .feat-row { margin-inline: -10px; padding-inline: 10px; scroll-padding: 0 10px; }
}
.hall-count { margin: -4px 0 10px; font-size: 13px; font-weight: 700; color: var(--gold-2); }
.pk-bot-tag {
  flex: none; margin-left: 4px; padding: 1px 6px; border-radius: 999px; border: 1px solid rgba(143, 240, 228, .5);
  font-size: 10px; font-weight: 800; line-height: 1.3; color: #8ff0e4; text-transform: uppercase; letter-spacing: .06em;
}
.home-more { margin: 6px 0 -14px; font-size: 15px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }

/* ---------- Бонус дня и задания дня (верх главной) ---------- */
.daily {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: 18px 26px;
  padding: 18px 20px;
  background:
    radial-gradient(120% 140% at 0% 0%, rgba(242, 193, 78, .13), transparent 55%),
    var(--card);
}
.daily.has-ready { border-color: rgba(242, 193, 78, .42); }
.daily-bonus { display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "gift info" "gift act"; gap: 10px 14px; align-items: start; }
.daily-gift {
  grid-area: gift;
  display: grid; place-items: center;
  width: 54px; height: 54px;
  border-radius: 16px;
  font-size: 30px;
  background: radial-gradient(circle at 50% 35%, rgba(255, 223, 138, .28), rgba(242, 193, 78, .06) 70%);
  border: 1px solid rgba(242, 193, 78, .3);
}
.daily.has-ready .daily-gift { animation: daily-wiggle 2.6s ease-in-out infinite; }
@keyframes daily-wiggle {
  0%, 82%, 100% { transform: rotate(0); }
  86% { transform: rotate(-9deg) scale(1.05); }
  90% { transform: rotate(8deg) scale(1.05); }
  94% { transform: rotate(-4deg); }
}
.daily-info { grid-area: info; min-width: 0; }
.daily-title { margin: 0 0 8px; font-size: 19px; display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; }
.daily-day { font-family: var(--font); font-size: 13px; font-weight: 700; color: var(--gold-2); }
.daily-pips { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 5px; }
.daily-pip { display: flex; flex-direction: column; align-items: center; gap: 3px; min-width: 0; }
.daily-pip b {
  display: grid; place-items: center;
  width: 30px; height: 30px;
  border-radius: 50%;
  font-size: 13px;
  color: var(--muted);
  background: rgba(0, 0, 0, .3);
  border: 1px solid var(--line-2);
}
.daily-pip span { font-size: 10.5px; color: var(--muted); white-space: nowrap; font-variant-numeric: tabular-nums; }
.daily-pip.taken b { color: #2a1b02; background: var(--gold-grad); border-color: transparent; }
.daily-pip.today b { color: var(--gold-2); border: 2px solid var(--gold); box-shadow: 0 0 0 3px rgba(242, 193, 78, .14), 0 0 14px rgba(242, 193, 78, .45); }
.daily-pip.today span { color: var(--gold-2); font-weight: 700; }
.daily-note { margin: 8px 0 0; font-size: 12.5px; color: var(--muted); }
.daily-take { grid-area: act; justify-self: start; }
.daily-done { grid-area: act; align-self: center; font-size: 13px; font-weight: 700; color: var(--green); }

.daily-quests { min-width: 0; padding-left: 22px; border-left: 1px solid var(--line-2); }
.daily-qhead { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 8px; }
.daily-qhead h3 { margin: 0; font-size: 15px; font-family: var(--display); font-weight: 700; }
.daily-reset { font-size: 12px; color: var(--muted); }
.daily-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.daily-q {
  display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; align-items: center; gap: 10px;
  padding: 8px 10px;
  border-radius: 12px;
  background: rgba(0, 0, 0, .22);
  border: 1px solid var(--line-2);
}
.daily-q.done:not(.claimed) { border-color: rgba(242, 193, 78, .5); background: rgba(242, 193, 78, .07); }
.daily-q.claimed { opacity: .62; }
.daily-q-icon { font-size: 20px; text-align: center; }
.daily-q-body { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.daily-q-text { font-size: 13px; line-height: 1.3; }
.daily-q.claimed .daily-q-text { text-decoration: line-through; text-decoration-color: rgba(243, 239, 226, .35); }
.daily-bar { display: block; height: 5px; border-radius: 3px; background: rgba(255, 255, 255, .07); overflow: hidden; }
.daily-bar i { display: block; height: 100%; border-radius: inherit; background: var(--gold-grad); transition: width .4s ease-out; }
.daily-q.lvl-medium .daily-bar i { background: linear-gradient(90deg, #3fd0e6, #8ff0e4); }
.daily-q.lvl-hard .daily-bar i { background: linear-gradient(90deg, #ff6a7a, #b46cff); }
.daily-q.done .daily-bar i { background: var(--green); }
.daily-q-side { display: flex; flex-direction: column; align-items: flex-end; gap: 1px; text-align: right; }
.daily-q-count { font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums; }
.daily-q-reward { font-size: 11.5px; color: var(--gold-2); white-space: nowrap; }
.daily-q-got { font-size: 12.5px; font-weight: 700; color: var(--green); white-space: nowrap; }
.daily-q-take { padding: 7px 12px; font-size: 13px; border-radius: 10px; white-space: nowrap; }

/* Раскладка по ширине главной (рядом бывает боковая колонка), а не окна. */
@container (max-width: 700px) {
  .daily { grid-template-columns: 1fr; }
  .daily-quests { padding: 14px 0 0; border-left: 0; border-top: 1px solid var(--line-2); }
}
@media (max-width: 560px) {
  .daily { padding: 14px; gap: 14px; }
  .daily-bonus { grid-template-areas: "gift info" "act act"; column-gap: 12px; }
  .daily-gift { width: 44px; height: 44px; font-size: 24px; border-radius: 13px; }
  .daily-title { font-size: 17px; }
  .daily-pips { gap: 3px; }
  .daily-pip b { width: 26px; height: 26px; font-size: 12px; }
  .daily-pip span { font-size: 9.5px; }
  .daily-take { justify-self: stretch; }
  .daily-done { justify-self: start; }
  .daily-q { grid-template-columns: 24px minmax(0, 1fr) auto; gap: 8px; padding: 8px; }
}
@media (prefers-reduced-motion: reduce) {
  .daily.has-ready .daily-gift { animation: none; }
}

/* Общая основа карточки: кнопка без золотого градиента обычных кнопок. */
.home-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 16px;
  border-radius: 16px;
  color: var(--text);
  font-weight: 500;
  text-align: left;
  overflow: hidden;
  transition: transform .18s, box-shadow .18s, filter .18s;
}
.home-card:not(:disabled):hover { transform: translateY(-3px); filter: none; }
.home-card:not(:disabled):active { transform: translateY(-1px) scale(.99); }
.home-name { font-family: var(--display); font-weight: 700; font-size: 17px; line-height: 1.2; }
.home-text { font-size: 13px; line-height: 1.35; color: rgba(243, 239, 226, .72); }

/* Казино: зелёное сукно, игра — в казино-фишке своего цвета. */
.casino-card {
  align-items: center;
  text-align: center;
  padding: 18px 12px 16px;
  background:
    radial-gradient(130% 90% at 50% 0%, rgba(255, 255, 255, .07), transparent 55%),
    repeating-linear-gradient(45deg, rgba(0, 0, 0, .06) 0 2px, transparent 2px 7px),
    linear-gradient(180deg, #145236, #0b2e1d);
  border: 1px solid rgba(242, 193, 78, .28);
  box-shadow: 0 10px 22px rgba(0, 0, 0, .4), inset 0 1px 0 rgba(255, 223, 138, .12);
}
.casino-card:not(:disabled):hover { box-shadow: 0 16px 30px rgba(0, 0, 0, .5), 0 0 0 1px rgba(242, 193, 78, .55), inset 0 1px 0 rgba(255, 223, 138, .2); }
.home-chip {
  position: relative;
  display: grid;
  place-items: center;
  width: 72px;
  height: 72px;
  margin-bottom: 8px;
  border-radius: 50%;
  background: repeating-conic-gradient(var(--c) 0 30deg, #f3efe2 30deg 45deg);
  box-shadow: 0 6px 14px rgba(0, 0, 0, .5), inset 0 0 0 3px rgba(0, 0, 0, .25);
  transition: transform .5s cubic-bezier(.3, 1.4, .5, 1);
}
.home-chip::before {
  content: "";
  position: absolute;
  inset: 10px;
  border-radius: 50%;
  background: radial-gradient(circle at 40% 35%, color-mix(in srgb, var(--c) 70%, #fff), var(--c) 55%, color-mix(in srgb, var(--c) 55%, #000));
  border: 2px dashed rgba(255, 255, 255, .55);
}
.home-chip-icon { position: relative; font-size: 26px; filter: drop-shadow(0 2px 2px rgba(0, 0, 0, .45)); transition: transform .5s cubic-bezier(.3, 1.4, .5, 1); }
.casino-card:hover .home-chip, .casino-card:focus-visible .home-chip { transform: rotate(40deg); }
.casino-card:hover .home-chip-icon, .casino-card:focus-visible .home-chip-icon { transform: rotate(-40deg); }

/* Соревнования: стенка на стенку — красный против синего, игра на стыке. */
.versus-card {
  min-height: 168px;
  padding: 16px 18px;
  background:
    linear-gradient(180deg, transparent 30%, rgba(5, 4, 10, .78) 72%),
    linear-gradient(112deg, #6e1424 0 49.6%, #f2c14e 49.6% 50.4%, #142a6a 50.4% 100%);
  border: 1px solid rgba(255, 255, 255, .12);
  box-shadow: 0 10px 24px rgba(0, 0, 0, .45);
}
.versus-card:not(:disabled):hover { box-shadow: 0 16px 32px rgba(0, 0, 0, .55), 0 0 0 1px rgba(255, 255, 255, .3); }
.home-vs {
  display: grid;
  place-items: center;
  width: 58px;
  height: 58px;
  margin: 2px 0 auto;
  border-radius: 50%;
  background: radial-gradient(circle at 40% 35%, #2a2a3a, #0a0a12);
  border: 2px solid #f2c14e;
  box-shadow: 0 0 0 4px rgba(0, 0, 0, .35), 0 0 22px rgba(242, 193, 78, .35);
  font-size: 28px;
  transition: transform .25s;
}
.versus-card:hover .home-vs { transform: scale(1.08) rotate(-6deg); }
.versus-card .home-name { margin-top: 12px; font-size: 19px; }
.home-call {
  position: absolute;
  top: 12px;
  right: 12px;
  padding: 3px 10px;
  border-radius: 999px;
  background: var(--red);
  color: #fff;
  font-size: 12px;
  font-weight: 800;
  box-shadow: 0 0 14px var(--red);
  animation: pulse 1s infinite;
}

/* Слоты: окошко барабана с живым символом и вывеска слота его же шрифтом. */
.slots-card {
  display: grid;
  grid-template-columns: 124px minmax(0, 1fr);
  grid-template-rows: 1fr auto;
  column-gap: 16px;
  align-items: center;
  min-height: 160px;
  padding: 16px;
  border: 1px solid rgba(255, 255, 255, .12);
  box-shadow: 0 12px 28px rgba(0, 0, 0, .5);
}
.slot-kraken {
  background:
    radial-gradient(70% 90% at 15% 50%, rgba(95, 232, 216, .16), transparent 60%),
    radial-gradient(60% 80% at 90% 110%, rgba(140, 20, 50, .45), transparent 60%),
    linear-gradient(160deg, #0b2a30, #041418 60%, #020a0c);
  border-color: rgba(201, 161, 74, .45);
}
.slot-saloon {
  background:
    radial-gradient(80% 70% at 75% 115%, rgba(255, 140, 60, .5), transparent 60%),
    linear-gradient(180deg, #170812, #3a1214 55%, #6e2a12);
  border-color: rgba(201, 139, 78, .5);
}
.slots-card:not(:disabled):hover { box-shadow: 0 18px 36px rgba(0, 0, 0, .6), 0 0 0 1px rgba(255, 223, 138, .5); }
.home-window {
  grid-row: 1 / 3;
  width: 124px;
  height: 124px;
  border-radius: 14px;
  background: radial-gradient(circle at 50% 40%, rgba(255, 255, 255, .06), rgba(0, 0, 0, .55));
  box-shadow: inset 0 0 0 2px rgba(0, 0, 0, .6), inset 0 0 18px rgba(0, 0, 0, .7), 0 0 0 3px rgba(201, 161, 74, .55);
  overflow: hidden;
}
.slot-saloon .home-window { box-shadow: inset 0 0 0 2px rgba(0, 0, 0, .6), inset 0 0 18px rgba(0, 0, 0, .7), 0 0 0 3px rgba(150, 100, 60, .7); }
.home-sym { display: block; width: 100%; height: 100%; }
.home-words { display: flex; flex-direction: column; gap: 2px; align-self: end; }
.slots-card .home-name { font-size: 34px; font-weight: 700; line-height: 1; }
.home-sub { font-size: 15px; letter-spacing: .14em; margin-bottom: 6px; }
.slot-kraken .home-name {
  font-family: "Cormorant SC", Georgia, serif;
  background: linear-gradient(180deg, #f5e2a8, #c9a14a 60%, #8a6a2e);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.slot-kraken .home-sub { font-family: "Cormorant SC", Georgia, serif; color: #8ff0e4; }
.slot-saloon .home-name, .slot-saloon .home-sub {
  font-family: "Ruslan Display", Georgia, serif;
  font-weight: 400;
  background: linear-gradient(180deg, #efe0c8, #c98a4a 55%, #6e2a0c);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.home-play {
  justify-self: start;
  align-self: start;
  margin-top: 10px;
  padding: 6px 16px;
  border-radius: 999px;
  background: var(--gold-grad);
  color: #2a1b02;
  font-family: var(--display);
  font-size: 13px;
  font-weight: 700;
  box-shadow: 0 4px 12px rgba(242, 193, 78, .3);
}

@media (max-width: 560px) {
  .home { gap: 24px; }
  .home-casino .home-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .home-versus .home-grid, .home-slots .home-grid { grid-template-columns: 1fr; }
  .home-versus [data-go="likhie"] { grid-column: auto; }
  .versus-card { min-height: 0; display: grid; grid-template-columns: 52px minmax(0, 1fr); column-gap: 14px; row-gap: 2px; align-items: center; padding: 14px 16px; }
  .versus-card .home-vs { grid-row: 1 / 3; width: 52px; height: 52px; margin: 0; font-size: 24px; }
  .versus-card .home-name { margin-top: 0; align-self: end; }
  .versus-card .home-text { align-self: start; }
  .slots-card { grid-template-columns: 96px minmax(0, 1fr); }
  .home-window { width: 96px; height: 96px; }
  .slots-card .home-name { font-size: 28px; }
}

/* ---------- Приколы от админа (pranks.js) ---------- */

.title-tag {
  display: inline-block; margin: 0 6px; padding: 1px 8px; border-radius: 999px;
  background: linear-gradient(180deg, rgba(242, 193, 78, .25), rgba(242, 193, 78, .1));
  border: 1px solid rgba(242, 193, 78, .5); color: var(--gold-2);
  font-size: 11px; font-weight: 700; white-space: nowrap; vertical-align: middle;
}
.prank-scare { position: fixed; inset: 0; width: 100vw; height: 100vh; z-index: 200; pointer-events: none; }
/* Фонарик: темнота с кругом света; клики проходят насквозь. Гаснет быстро, возвращается плавно. */
.prank-flash { position: fixed; inset: 0; z-index: 195; pointer-events: none; opacity: 0; transition: opacity 1.5s ease-in-out; }
.prank-flash.on { opacity: 1; transition-duration: .5s; }

.prank-jackpot {
  position: fixed; inset: 0; z-index: 190; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
  background: radial-gradient(circle, rgba(60, 30, 0, .78), rgba(0, 0, 0, .9)); pointer-events: none;
  animation: pj-in .35s cubic-bezier(.3, 1.6, .5, 1);
}
.pj-title { max-width: 94vw; text-align: center; font-family: var(--display); font-weight: 800; font-size: clamp(34px, 8vw, 110px); background: var(--gold-grad); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 6px 18px rgba(242, 193, 78, .6)); animation: pj-pulse .5s ease-in-out infinite alternate; }
.pj-sum { font-family: var(--display); font-weight: 800; font-size: clamp(30px, 6vw, 64px); color: #fff; text-shadow: 0 4px 16px rgba(0, 0, 0, .8); }
.pj-sub { font-size: 18px; color: var(--gold-2); }
.prank-jackpot.joke .pj-title { animation: none; background: none; color: #ff9a9a; -webkit-text-fill-color: #ff9a9a; filter: none; }
.prank-jackpot.joke .pj-sum { color: var(--muted); font-size: clamp(24px, 4vw, 40px); }
@keyframes pj-in { from { transform: scale(.4); opacity: 0; } }
@keyframes pj-pulse { to { transform: scale(1.06); } }

.prank-chest {
  position: fixed; left: 16px; bottom: 16px; z-index: 120;
  display: flex; align-items: center; gap: 14px; padding: 12px 16px; border-radius: 18px;
  background: linear-gradient(180deg, #3a2a0e, #1a1206); border: 2px solid var(--gold);
  box-shadow: 0 0 0 4px rgba(0, 0, 0, .4), 0 14px 40px rgba(0, 0, 0, .6), 0 0 40px rgba(242, 193, 78, .35);
  animation: pc-drop .5s cubic-bezier(.3, 1.6, .5, 1);
  max-width: calc(100vw - 32px);
}
.pc-icon { font-size: 40px; animation: pc-wobble 1s ease-in-out infinite; }
.pc-text { display: flex; flex-direction: column; min-width: 0; }
.pc-text b { font-family: var(--display); font-size: 17px; color: var(--gold-2); }
.pc-timer { font-size: 12px; color: var(--muted); }
.pc-grab { white-space: nowrap; font-size: 16px; padding: 12px 22px; }
.prank-chest.won { border-color: var(--green); }
.prank-chest.lost { border-color: var(--muted); opacity: .85; }
.prank-chest.won .pc-icon, .prank-chest.lost .pc-icon { animation: none; }
@keyframes pc-drop { from { transform: translate(-30px, -60vh) rotate(-12deg); } }
@keyframes pc-wobble { 50% { transform: rotate(-10deg) scale(1.08); } }

/* Лотерея — карточка сверху справа: не закрывает игру и пропускает клики (можно забрать краш, крутить слот). */
.prank-lottery { position: fixed; top: 76px; right: 16px; z-index: 180; pointer-events: none; transition: opacity .45s, transform .45s; animation: pl-in .4s cubic-bezier(.3, 1.4, .5, 1); }
@keyframes pl-in { from { transform: translateX(120%); } }
.prank-lottery.out { opacity: 0; transform: translateX(40%); }
.pl-card {
  width: min(280px, calc(100vw - 32px)); padding: 14px 16px 12px; border-radius: 18px; text-align: center;
  background: linear-gradient(180deg, #2a1e08, #120c04); border: 2px solid var(--gold);
  box-shadow: 0 20px 60px rgba(0, 0, 0, .7), 0 0 50px rgba(242, 193, 78, .3);
}
.pl-title { font-family: var(--display); font-weight: 800; font-size: 22px; background: var(--gold-grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.pl-prize { color: var(--muted); margin-bottom: 10px; font-size: 13px; }
.pl-window {
  position: relative; height: 54px; overflow: hidden; border-radius: 12px; background: rgba(0, 0, 0, .5);
  box-shadow: inset 0 0 0 2px rgba(242, 193, 78, .5), inset 0 10px 16px rgba(0, 0, 0, .6), inset 0 -10px 16px rgba(0, 0, 0, .6);
}
.pl-strip { will-change: transform; }
.pl-name { height: 54px; line-height: 54px; text-align: center; font-family: var(--display); font-weight: 700; font-size: 22px; color: #fff; }
.pl-result { min-height: 24px; margin-top: 10px; font-size: 16px !important; font-family: var(--display); font-weight: 700; font-size: 19px; color: var(--gold-2); }
.pl-card.won { border-color: var(--green); box-shadow: 0 20px 60px rgba(0, 0, 0, .7), 0 0 60px rgba(69, 212, 131, .45); }
.pl-card.won .pl-result { color: var(--green); }

/* ---------- Крупные выигрыши друзей и реакции (bigwins.js) ---------- */
/* Колонка справа сверху: сама колонка клики не ловит, только карточки. */
.bw-stack { position: fixed; top: 76px; right: 16px; z-index: 115; display: flex; flex-direction: column; gap: 8px; width: min(320px, calc(100vw - 32px)); pointer-events: none; }
.bw-card {
  position: relative; pointer-events: auto; padding: 10px 12px 8px; border-radius: 16px;
  background: linear-gradient(180deg, rgba(42, 30, 8, .96), rgba(18, 12, 4, .96)); border: 1px solid rgba(242, 193, 78, .7);
  box-shadow: 0 14px 40px rgba(0, 0, 0, .55), 0 0 26px rgba(242, 193, 78, .2);
  animation: bw-in .4s cubic-bezier(.3, 1.4, .5, 1); transition: opacity .35s, transform .35s;
}
.bw-card.out { opacity: 0; transform: translateX(40%); }
@keyframes bw-in { from { transform: translateX(120%); } }
.bw-text { padding-right: 18px; font-size: 14px; line-height: 1.35; overflow-wrap: anywhere; }
.bw-icon { margin-right: 6px; }
.bw-name { color: #fff; }
.bw-sum { color: var(--gold-2); font-variant-numeric: tabular-nums; }
.bw-close { position: absolute; top: 4px; right: 6px; padding: 2px 6px; border: 0; background: none; color: var(--muted); font-size: 18px; line-height: 1; cursor: pointer; }
.bw-reacts { display: flex; gap: 6px; margin-top: 8px; }
.bw-react {
  flex: 1 1 0; display: flex; align-items: center; justify-content: center; gap: 4px; min-height: 36px; padding: 4px 6px;
  border-radius: 12px; border: 1px solid rgba(255, 255, 255, .12); background: rgba(255, 255, 255, .06); cursor: pointer;
  transition: transform .15s, background .15s, opacity .2s;
}
.bw-react:hover { background: rgba(242, 193, 78, .18); transform: translateY(-1px); }
.bw-e { font-size: 20px; line-height: 1; }
.bw-n { font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }
.bw-card.done .bw-react { cursor: default; opacity: .45; transform: none; }
.bw-card.done .bw-react.mine { opacity: 1; background: rgba(242, 193, 78, .25); border-color: var(--gold); animation: bw-pop .35s cubic-bezier(.3, 1.8, .5, 1); }
@keyframes bw-pop { 50% { transform: scale(1.18); } }
.bw-mine { border-color: var(--green); box-shadow: 0 14px 40px rgba(0, 0, 0, .55), 0 0 26px rgba(69, 212, 131, .25); overflow: visible; }
.bw-who { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.bw-chip { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px 2px 4px; border-radius: 999px; background: rgba(255, 255, 255, .08); font-size: 13px; animation: bw-pop .35s cubic-bezier(.3, 1.8, .5, 1); }
.bw-chip .bw-e { font-size: 16px; }
.bw-fly { position: absolute; bottom: 10px; font-size: 30px; pointer-events: none; animation: bw-fly 1.2s ease-out forwards; }
@keyframes bw-fly { from { transform: translateY(0) scale(.6); opacity: 1; } to { transform: translateY(-90px) scale(1.4); opacity: 0; } }
@media (max-width: 700px) {
  .bw-stack { top: 64px; right: 8px; width: min(360px, calc(100vw - 16px)); }
  .bw-card { padding: 8px 10px 6px; }
  .bw-text { font-size: 13px; }
  .bw-reacts { margin-top: 6px; }
  .bw-react { min-height: 34px; }
}

/* ---------- Телефон: компактная шапка, вкладки в одну строку, рулетка по ширине ---------- */

.quick button { flex: 1 1 0; min-width: 40px; padding-left: 8px; padding-right: 8px; }

@media (max-width: 700px) {
  .topbar { flex-wrap: nowrap; gap: 8px; padding: 8px 10px; }
  .logo-icon { display: none; }
  .logo { font-size: 18px; margin-right: 0; }
  .me { gap: 8px; margin-left: auto; min-width: 0; }
  #me-name { max-width: 84px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .chips { padding: 4px 9px 4px 6px; font-size: 13px; }
  .conn { font-size: 0; }
  .conn::before { margin-right: 0; }

  /* Вкладки игры — одна строка, листается пальцем; активная вкладка сама прокручивается в центр. */
  .tabs { position: relative; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .tabs::-webkit-scrollbar { display: none; }
  .tab-group, .tab-home { flex: none; flex-wrap: nowrap; }

  .board { grid-template-columns: 24px repeat(12, minmax(17px, 1fr)) 24px; grid-template-rows: repeat(3, 34px) 30px 30px; min-width: 0; }
  .board .cell { font-size: 10px; white-space: nowrap; letter-spacing: -.02em; }
  .board-wrap { padding: 8px; border-width: 4px; }
}
@media (max-width: 420px) {
  #me-name { display: none; }
}

@media (max-width: 700px) {
  .prank-lottery { top: 64px; right: 8px; }
  .prank-chest { left: 8px; right: 70px; bottom: 8px; }
}

/* ---------- Мероприятия от админа ---------- */
/* Колонка плашек слева сверху: не мешает кликам мимо них. */
.ev-stack { position: fixed; top: 76px; left: 16px; z-index: 125; display: flex; flex-direction: column; gap: 8px; width: min(300px, calc(100vw - 32px)); pointer-events: none; }
.ev-stack > * {
  pointer-events: auto; padding: 10px 14px; border-radius: 16px;
  background: linear-gradient(180deg, #2a1e08, #120c04); border: 2px solid var(--gold);
  box-shadow: 0 14px 40px rgba(0, 0, 0, .6), 0 0 30px rgba(242, 193, 78, .25);
  animation: ev-in .4s cubic-bezier(.3, 1.4, .5, 1);
}
@keyframes ev-in { from { transform: translateX(-120%); } }
.ev-left { font-variant-numeric: tabular-nums; color: var(--muted); font-size: 13px; }
.ev-stack b { font-family: var(--display); font-size: 15px; color: var(--gold-2); }

.ev-happy { display: flex; justify-content: space-between; align-items: center; gap: 10px; border-color: #ffd23a; background: linear-gradient(90deg, #3b2a00, #1b1300); animation: ev-in .4s cubic-bezier(.3, 1.4, .5, 1), ev-glow 1.6s ease-in-out infinite alternate; }
.ev-happy b { background: var(--gold-grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
@keyframes ev-glow { to { box-shadow: 0 14px 40px rgba(0, 0, 0, .6), 0 0 44px rgba(255, 210, 58, .6); } }

.ev-race-head, .ev-quiz-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.ev-race-top { list-style: none; margin: 6px 0 0; padding: 0; font-size: 14px; }
.ev-race-top li { display: flex; justify-content: space-between; gap: 8px; padding: 2px 0; }
.ev-race-top li span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ev-race-top li.me { color: var(--gold-2); font-weight: 700; }
.ev-race-top li.empty { color: var(--muted); font-size: 13px; }
.ev-race-top .plus { color: var(--green); font-variant-numeric: tabular-nums; }
.ev-race-top .minus { color: #ff8a80; font-variant-numeric: tabular-nums; }
.ev-race-foot { margin-top: 4px; font-size: 12px; color: var(--muted); }
.ev-race.done { border-color: var(--green); }

.ev-quiz { border-color: #8ec5ff; box-shadow: 0 14px 40px rgba(0, 0, 0, .6), 0 0 30px rgba(110, 170, 255, .35); }
.ev-quiz-q { margin: 6px 0 8px; font-size: 15px; color: #fff; overflow-wrap: anywhere; }
.ev-quiz-form { display: flex; gap: 6px; }
.ev-quiz-form input { flex: 1 1 auto; min-width: 0; }
.ev-quiz-form button { flex: none; }
.ev-quiz-res { font-family: var(--display); font-weight: 700; color: var(--muted); }
.ev-quiz-res.won { color: var(--green); }

/* Дождь: слой пропускает клики, ловятся только сами монеты. */
.ev-rain { position: fixed; inset: 0; z-index: 175; pointer-events: none; overflow: hidden; }
.ev-rain-banner {
  position: absolute; top: 70px; left: 50%; transform: translateX(-50%); white-space: nowrap;
  padding: 8px 18px; border-radius: 999px; background: rgba(10, 20, 14, .85); border: 2px solid var(--gold);
  font-family: var(--display); font-weight: 700; color: var(--gold-2); box-shadow: 0 10px 30px rgba(0, 0, 0, .5);
}
.ev-rain-banner.done { border-color: var(--green); }
.ev-coin {
  position: absolute; top: -60px; width: 48px; height: 48px; padding: 0; border: 0; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, rgba(255, 240, 180, .35), transparent 60%); font-size: 36px; line-height: 48px;
  pointer-events: auto; cursor: pointer; touch-action: none; filter: drop-shadow(0 4px 6px rgba(0, 0, 0, .5));
  animation: ev-fall linear both;
}
.ev-coin-i { display: block; transition: transform .1s; }
.ev-coin:hover .ev-coin-i { transform: scale(1.15); }
.ev-coin.got, .ev-coin.gone { pointer-events: none; }
.ev-coin.got .ev-coin-i { animation: ev-pop .25s ease-out forwards; }
.ev-coin.gone .ev-coin-i { animation: ev-gone .2s ease-out forwards; }
@keyframes ev-fall { from { transform: translateY(0) rotate(-20deg); } to { transform: translateY(calc(100vh + 120px)) rotate(340deg); } }
@keyframes ev-pop { to { transform: scale(1.8); opacity: 0; } }
@keyframes ev-gone { to { transform: scale(.3); opacity: 0; } }

.ev-float {
  position: fixed; z-index: 190; transform: translate(-50%, 0); pointer-events: none; white-space: nowrap;
  font-family: var(--display); font-weight: 800; font-size: 20px; color: var(--gold-2); text-shadow: 0 2px 8px rgba(0, 0, 0, .9);
  animation: ev-up 1.2s ease-out forwards;
}
.ev-float.happy { font-size: 24px; color: #ffd23a; }
@keyframes ev-up { to { transform: translate(-50%, -70px); opacity: 0; } }

@media (max-width: 700px) {
  .ev-stack { top: 64px; left: 8px; width: min(260px, calc(100vw - 16px)); }
  .ev-stack > * { padding: 8px 12px; }
}

/* ---------- Блэкджек ---------- */
/* Полукруглый стол: кожаный борт, зелёное сукно, золотая надпись по дуге. Карты — вёрстка с 3D-переворотом. */

.bj-table {
  --w: 76px;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  min-height: 470px;
  padding: 22px 16px 40px;
  border: 12px solid transparent;
  border-radius: 30px 30px 50% 50% / 30px 30px 24% 24%;
  background:
    radial-gradient(90% 60% at 50% 0%, rgba(255, 255, 255, .09), transparent 60%) padding-box,
    repeating-linear-gradient(45deg, rgba(255, 255, 255, .014) 0 2px, transparent 2px 5px) padding-box,
    radial-gradient(85% 75% at 50% 45%, #1c7347 0%, #125634 55%, #0a3b22 100%) padding-box,
    linear-gradient(180deg, #6b3a1c, #3d1f0d 55%, #241105) border-box;
  box-shadow:
    inset 0 0 0 1px rgba(242, 193, 78, .5),
    inset 0 0 0 5px rgba(0, 0, 0, .18),
    inset 0 0 0 6px rgba(242, 193, 78, .22),
    inset 0 0 70px rgba(0, 0, 0, .5),
    0 2px 0 rgba(255, 220, 160, .25),
    0 24px 50px rgba(0, 0, 0, .55);
  overflow: hidden;
  isolation: isolate;
}
.bj-arc { width: min(100%, 560px); height: auto; margin: 0 0 -26px; pointer-events: none; order: 2; }
.bj-arc-main { font: 700 17px var(--display); fill: rgba(242, 193, 78, .72); letter-spacing: .16em; }
.bj-arc-sub { font: 600 12px var(--font); fill: rgba(243, 239, 226, .42); letter-spacing: .1em; text-transform: uppercase; }
.bj-dealer-zone { order: 1; }
.bj-msg { order: 3; }
.bj-hands { order: 4; }

/* Шуз в углу: чем меньше карт, тем ниже стопка. */
.bj-shoe {
  --fill: 1;
  position: absolute;
  top: 14px;
  right: 18px;
  width: 58px;
  height: 50px;
  border-radius: 10px 10px 6px 6px;
  background: linear-gradient(180deg, #2c2c30, #0f0f12);
  box-shadow: 0 0 0 1px rgba(242, 193, 78, .35), 0 8px 18px rgba(0, 0, 0, .5), inset 0 1px 0 rgba(255, 255, 255, .12);
  transform: rotate(8deg);
}
.bj-shoe-cards {
  position: absolute;
  left: 7px; right: 7px; bottom: 9px;
  height: calc(30px * var(--fill));
  border-radius: 3px;
  background:
    repeating-linear-gradient(0deg, rgba(255, 255, 255, .5) 0 1px, transparent 1px 3px),
    linear-gradient(180deg, #8a1c25, #4a0b12);
  box-shadow: inset 0 0 0 1px rgba(242, 193, 78, .5);
  transition: height .4s;
}
.bj-shoe-left {
  position: absolute;
  left: 0; right: 0; bottom: -20px;
  font: 700 11px var(--display);
  color: rgba(243, 239, 226, .55);
  text-align: center;
  transform: rotate(-8deg);
}

.bj-dealer-zone, .bj-hand { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.bj-dealer-zone { min-height: calc(var(--w) * 1.4 + 38px); justify-content: flex-start; }
.bj-cards { display: flex; min-height: calc(var(--w) * 1.4); }
.bj-cards .bj-card + .bj-card { margin-left: calc(var(--w) * -.48); }

.bj-msg {
  min-height: 1.5em;
  margin: 14px 0 10px;
  padding: 0 8px;
  font: 700 17px var(--display);
  text-align: center;
  color: var(--text);
  text-shadow: 0 2px 10px rgba(0, 0, 0, .6);
}
.bj-msg.win { color: #7dffb2; }
.bj-msg.lose { color: #ff8a83; }
.bj-msg.push { color: var(--gold-2); }
.bj-msg.pop { animation: pop .4s; }

.bj-hands { display: flex; justify-content: center; gap: 18px; min-height: calc(var(--w) * 1.4 + 80px); }
.bj-hand { position: relative; padding: 10px 12px 8px; border-radius: 18px; transition: background .25s, box-shadow .25s, opacity .3s; }
.bj-hand .bj-cards { order: 1; }
.bj-hand .bj-badge { order: 2; }
.bj-hand .bj-bet { order: 3; }
.bj-hand.cur { background: rgba(242, 193, 78, .08); box-shadow: 0 0 0 1px rgba(242, 193, 78, .55), 0 0 24px rgba(242, 193, 78, .15); }
.bj-hand.lost .bj-cards { filter: saturate(.6) brightness(.82); transition: filter .4s; }

.bj-badge {
  padding: 3px 11px;
  border-radius: 999px;
  background: rgba(4, 18, 10, .72);
  border: 1px solid rgba(242, 193, 78, .45);
  font: 700 13px var(--display);
  font-variant-numeric: tabular-nums;
  color: var(--text);
  white-space: nowrap;
}
.bj-badge.best { border-color: #7dffb2; color: #7dffb2; }
.bj-badge.bust { border-color: #ff8a83; color: #ff8a83; background: rgba(60, 6, 6, .7); }
.bj-badge.bj { background: var(--gold-grad); color: #2a1b02; border-color: transparent; box-shadow: 0 0 18px rgba(242, 193, 78, .6); }

.bj-tag {
  position: absolute;
  top: 34%;
  left: 50%;
  z-index: 3;
  padding: 5px 12px;
  border-radius: 8px;
  font: 800 12px var(--display);
  letter-spacing: .06em;
  text-transform: uppercase;
  white-space: nowrap;
  transform: translate(-50%, -50%) rotate(-6deg);
  box-shadow: 0 8px 20px rgba(0, 0, 0, .5);
  animation: bj-stamp .35s cubic-bezier(.2, 1.6, .4, 1);
}
.bj-tag.win { background: linear-gradient(180deg, #8af5b6, #2fb86a); color: #052312; }
.bj-tag.blackjack { background: var(--gold-grad); color: #2a1b02; }
.bj-tag.push { background: linear-gradient(180deg, #f3efe2, #c9c2ad); color: #2a2618; }
.bj-tag.lose, .bj-tag.bust { background: linear-gradient(180deg, #ff8a7f, #c9362f); color: #fff; }
@keyframes bj-stamp { from { transform: translate(-50%, -50%) rotate(-6deg) scale(2); opacity: 0; } }

/* Фишка ставки у руки; удвоенная — стопкой из двух. */
.bj-bet { display: flex; align-items: center; gap: 7px; font: 700 13px var(--display); color: var(--gold-2); font-variant-numeric: tabular-nums; animation: bj-chip-in .35s ease-out; transition: opacity .3s; }
.bj-bet.gone { opacity: 0; }
.bj-chip {
  position: relative;
  width: 26px; height: 26px;
  border-radius: 50%;
  background:
    radial-gradient(circle, #b8232c 0 38%, #fff3d6 39% 44%, transparent 45%),
    repeating-conic-gradient(#b8232c 0 30deg, #f6ecd2 30deg 45deg);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .35), 0 3px 6px rgba(0, 0, 0, .45);
}
.bj-bet.doubled .bj-chip { box-shadow: 0 0 0 1px rgba(0, 0, 0, .35), 0 -4px 0 -1px #8d1820, 0 -5px 0 0 rgba(0, 0, 0, .35), 0 6px 8px rgba(0, 0, 0, .45); transform: translateY(2px); }
@keyframes bj-chip-in { from { transform: translateY(-16px); opacity: 0; } }

/* ---- Карта ---- */
.bj-card { position: relative; flex: none; width: var(--w); height: calc(var(--w) * 1.4); perspective: 700px; }
.bj-inner { position: absolute; inset: 0; transform-style: preserve-3d; transition: transform .5s cubic-bezier(.3, .7, .3, 1.1); }
.bj-card.down .bj-inner { transform: rotateY(180deg); }
.bj-front, .bj-back {
  position: absolute;
  inset: 0;
  border-radius: calc(var(--w) * .09);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  overflow: hidden;
}
.bj-front {
  background: linear-gradient(155deg, #fffef9 0%, #f6f0df 60%, #ece3cb 100%);
  color: #17191d;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .14), -3px 4px 10px rgba(0, 0, 0, .38);
}
.bj-card.red .bj-front { color: #c3131f; }
.bj-back {
  transform: rotateY(180deg);
  background:
    radial-gradient(circle at 50% 50%, #f2c14e 0 7%, transparent 7.5%),
    radial-gradient(circle at 50% 50%, transparent 0 15%, rgba(242, 193, 78, .55) 15.5% 17%, transparent 17.5%),
    repeating-linear-gradient(45deg, rgba(242, 193, 78, .2) 0 1px, transparent 1px 6px),
    repeating-linear-gradient(-45deg, rgba(242, 193, 78, .2) 0 1px, transparent 1px 6px),
    linear-gradient(160deg, #8a1c25, #4a0b12);
  box-shadow: inset 0 0 0 3px #f3ecd9, inset 0 0 0 4px rgba(201, 143, 34, .9), -3px 4px 10px rgba(0, 0, 0, .4);
}
.bj-corner {
  position: absolute;
  display: flex;
  flex-direction: column;
  align-items: center;
  line-height: .92;
  font-family: var(--display);
  font-weight: 700;
}
/* Уголки — узкой колонкой у края, значки и рамка картинки — в середине: друг на друга не залезают. */
.bj-corner.tl { top: 4%; left: 5%; }
.bj-corner.br { bottom: 4%; right: 5%; transform: rotate(180deg); }
.bj-r { font-size: calc(var(--w) * .21); letter-spacing: -.08em; }
.bj-s { font-size: calc(var(--w) * .16); }
.bj-pips { position: absolute; inset: 18% 37%; }
.bj-pip { position: absolute; font-size: calc(var(--w) * .17); line-height: 1; transform: translate(-50%, -50%); }
.bj-pip.flip { transform: translate(-50%, -50%) rotate(180deg); }
.bj-ace { position: absolute; inset: 0; display: grid; place-items: center; font-size: calc(var(--w) * .62); line-height: 1; }
.bj-face {
  position: absolute;
  inset: 15% 27%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border-radius: calc(var(--w) * .05);
  background: radial-gradient(circle at 50% 38%, rgba(242, 193, 78, .42), rgba(242, 193, 78, .1) 70%);
  box-shadow: inset 0 0 0 1px currentColor, inset 0 0 0 3px #f6f0df, inset 0 0 0 4px rgba(201, 143, 34, .85);
}
.bj-face b { font: 700 calc(var(--w) * .36) / 1 "Cormorant SC", Georgia, serif; }
.bj-face i { font-style: normal; font-size: calc(var(--w) * .16); line-height: 1; }

/* ---- Кнопки ---- */
.bj-controls { margin-top: 18px; }
.bj-betbox { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px; }
.bj-betbox .field { flex: 1 1 150px; margin: 0; }
.bj-betbox .action { flex: 1 1 200px; }
.bj-actions { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.bj-act { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; min-height: 60px; padding: 8px 10px; }
.bj-act b { font: 700 17px var(--display); }
.bj-act small { font-size: 11px; font-weight: 600; opacity: .75; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.bj-act.hit { background: linear-gradient(180deg, #8af5b6, #38c978 55%, #1f9a55); color: #052312; box-shadow: 0 6px 18px rgba(69, 212, 131, .28), inset 0 1px 0 rgba(255, 255, 255, .5), inset 0 -2px 0 rgba(0, 0, 0, .18); }
.bj-act.stand { background: linear-gradient(180deg, #ff9c92, #e0443d 55%, #b72c26); color: #fff; box-shadow: 0 6px 18px rgba(239, 91, 84, .28), inset 0 1px 0 rgba(255, 255, 255, .4), inset 0 -2px 0 rgba(0, 0, 0, .18); }
.bj-act.split { background: linear-gradient(180deg, #c9a6ff, #8f5cf0 55%, #6a3bc7); color: #fff; box-shadow: 0 6px 18px rgba(143, 92, 240, .28), inset 0 1px 0 rgba(255, 255, 255, .4), inset 0 -2px 0 rgba(0, 0, 0, .18); }
.u-feed li.push .u-what { color: var(--gold-2); }

@media (max-width: 700px) {
  .bj-table { --w: 58px; min-height: 400px; padding: 16px 8px 34px; border-width: 9px; border-radius: 24px 24px 50% 50% / 24px 24px 18% 18%; }
  .bj-arc { margin-bottom: -18px; }
  .bj-arc-main { font-size: 19px; }
  .bj-arc-sub { font-size: 14px; }
  .bj-shoe { top: 10px; right: 10px; transform: rotate(8deg) scale(.82); transform-origin: top right; }
  .bj-hands { gap: 6px; }
  .bj-hand { padding: 8px 6px 6px; }
  .bj-msg { font-size: 15px; margin: 10px 0 6px; }
  .bj-actions { grid-template-columns: 1fr 1fr; gap: 8px; }
  .bj-act { min-height: 54px; }
}
@media (max-width: 420px) {
  .bj-table { --w: 52px; }
  .bj-cards .bj-card + .bj-card { margin-left: calc(var(--w) * -.55); }
}

/* ---------- Приложение (PWA): вырез экрана и кнопка установки ---------- */

/* В standalone-режиме iPhone страница уходит под статус-бар: закрываем полосу цветом шапки. */
.topbar { border-top: env(safe-area-inset-top, 0px) solid #06100b; }
html { padding-left: env(safe-area-inset-left, 0px); padding-right: env(safe-area-inset-right, 0px); }
.toast, .music, .lounge, .prank-chest { margin-bottom: env(safe-area-inset-bottom, 0px); }
main { padding-bottom: calc(90px + env(safe-area-inset-bottom, 0px)); }

.install-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 18px;
  padding: 10px 12px 10px 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--card);
  box-shadow: var(--shadow);
}
.install-bar img { flex: none; border-radius: 10px; }
.install-text { flex: 1; min-width: 0; font-size: 14px; line-height: 1.35; }
.install-text b { color: var(--gold-2); }
.install-bar #install-btn { flex: none; padding: 9px 16px; font-size: 14px; }
button.install-close { flex: none; padding: 6px; color: var(--muted); font-size: 15px; }

/* Вход без регистрации: плашка гостя и кнопка на экране входа. Гостю не нужны пароль, push, уровень и ачивки. */
.guest-bar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px 14px;
  margin: 0 0 18px;
  padding: 10px 14px;
  border: 1px solid rgba(242, 193, 78, .45);
  border-radius: var(--radius);
  background: rgba(242, 193, 78, .1);
}
.guest-text { flex: 1 1 260px; min-width: 0; font-size: 14px; line-height: 1.4; }
.guest-text b { color: var(--gold-2); }
.guest-bar #guest-save, .guest-bar #guest-login { flex: none; padding: 9px 16px; font-size: 14px; }
body.guest #me-pass, body.guest #me-push, body.guest #me-lvl, body.guest #me-ach,
body.guest #push-card, body.guest #daily, body.guest #tilt { display: none !important; }

/* Узкий телефон: название зала остаётся в шапке, остальное ужимается. */
@media (max-width: 420px) {
  .topbar { gap: 6px; }
  .logo { font-size: 14px; letter-spacing: 0; flex-shrink: 0; }
  .me { gap: 4px; }
  .me .chips { flex-shrink: 0; font-size: 12px; padding: 3px 7px 3px 4px; }
  #logout { font-size: 12px; }
  /* Места нет: бейдж уровня встаёт вместо счётчика 🏅 — оба открывают свой профиль с достижениями. */
  #me-ach { display: none; }
}

/* ---------- Заставка: зал перезапускается / технический перерыв ---------- */
.pause {
  position: fixed; inset: 0; z-index: 9000; display: grid; place-items: center;
  padding: env(safe-area-inset-top) 16px env(safe-area-inset-bottom);
  background: radial-gradient(900px 520px at 50% -10%, rgba(242, 193, 78, .16), transparent 60%), rgba(7, 19, 13, .94);
  animation: pause-in .35s ease both;
}
.pause[hidden], .pause-bar[hidden], .pause-dots[hidden] { display: none; }
.pause-card {
  width: min(420px, 100%); padding: 30px 26px 26px; text-align: center; border-radius: var(--radius);
  background: var(--card); border: 1px solid var(--line); box-shadow: var(--shadow);
}
.pause-brand {
  font: 800 30px/1.1 var(--display); letter-spacing: .01em;
  background: var(--gold-grad); -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 2px 12px rgba(242, 193, 78, .25));
}
/* display: block — у всех h2 зала flex, и text-align карточки на заголовок не действует (он уезжал влево). */
.pause-title { display: block; margin: 14px 0 6px; font: 700 17px/1.3 var(--display); color: var(--text); }
.pause-text { margin: 0; color: var(--muted); line-height: 1.45; overflow-wrap: anywhere; }
.pause-until { margin: 12px 0 0; color: var(--gold-2); font-weight: 700; }
.pause-chip {
  width: 64px; height: 64px; margin: 0 auto 16px; border-radius: 50%; position: relative;
  background: repeating-conic-gradient(var(--gold) 0 30deg, var(--gold-3) 30deg 60deg);
  box-shadow: 0 0 0 4px rgba(242, 193, 78, .14), 0 10px 24px rgba(0, 0, 0, .4);
  animation: pause-spin 3.2s linear infinite;
}
.pause-chip span { position: absolute; inset: 11px; border-radius: 50%; background: var(--felt); border: 2px dashed rgba(255, 223, 138, .55); }
.pause-dots { display: flex; justify-content: center; gap: 7px; margin: 16px 0 0; }
.pause-dots i { width: 7px; height: 7px; border-radius: 50%; background: var(--gold); opacity: .25; animation: pause-dot 1.2s ease-in-out infinite; }
.pause-dots i:nth-child(2) { animation-delay: .2s; }
.pause-dots i:nth-child(3) { animation-delay: .4s; }
.pause-stay {
  margin-top: 20px; border: 1px solid var(--line); border-radius: 999px; padding: 10px 20px; cursor: pointer;
  font: 700 14px/1 var(--font); color: var(--text); background: rgba(255, 255, 255, .04);
}
.pause-stay:hover { border-color: var(--gold); }
.pause[data-mode="maintenance"] .pause-chip { animation-duration: 9s; }
.pause-bar {
  position: fixed; left: 50%; top: calc(8px + env(safe-area-inset-top)); transform: translateX(-50%); z-index: 8999;
  display: flex; align-items: center; gap: 10px; max-width: calc(100% - 32px); padding: 7px 8px 7px 14px; border-radius: 999px;
  background: var(--card-solid); border: 1px solid var(--gold-3); box-shadow: var(--shadow);
  font: 700 13px/1.2 var(--font); color: var(--gold-2);
}
.pause-bar span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pause-bar button { flex-shrink: 0; border: 0; border-radius: 999px; padding: 5px 10px; cursor: pointer; font: 700 12px/1 var(--font); color: #1b1405; background: var(--gold-grad); }
@keyframes pause-in { from { opacity: 0; } }
@keyframes pause-spin { to { transform: rotate(360deg); } }
@keyframes pause-dot { 0%, 100% { opacity: .25; transform: translateY(0); } 50% { opacity: 1; transform: translateY(-4px); } }
@media (prefers-reduced-motion: reduce) {
  .pause, .pause-chip, .pause-dots i { animation: none; }
  .pause-dots i { opacity: .7; }
}

/* ---------- Блэкджек за общим столом ---------- */
/* Тот же стол, что у одиночного, но шире внизу: пять мест по дуге, у каждого табличка с именем и ставкой. */

.bjt-table { --w: 64px; min-height: 560px; padding-bottom: 46px; border-radius: 30px 30px 50% 50% / 30px 30px 18% 18%; }
.bjt-table .bj-dealer-zone { order: 1; }
.bjt-table .bj-arc { order: 2; }
.bjt-status { order: 3; display: flex; flex-direction: column; align-items: center; gap: 6px; min-height: 52px; }
.bjt-status .bj-msg { margin: 10px 0 0; }
.bjt-timer { width: min(260px, 70%); height: 4px; border-radius: 4px; background: rgba(0, 0, 0, .35); overflow: hidden; }
.bjt-timer i { display: block; height: 100%; background: var(--gold-grad); transform-origin: left; transition: transform .25s linear; }
.bjt-timer.hurry i { background: linear-gradient(90deg, #ff8a7f, #e0443d); }
.bjt-seats {
  order: 4;
  --sw: 44px;
  width: 100%;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
  align-items: end;
  margin-top: 6px;
}
/* Дуга: крайние места выше, среднее ниже всех — как вокруг настоящего стола. */
.bjt-seat.s0, .bjt-seat.s4 { transform: translateY(-46px); }
.bjt-seat.s1, .bjt-seat.s3 { transform: translateY(-12px); }
.bjt-seat {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
  min-width: 0;
  min-height: calc(var(--sw) * 1.4 + 86px);
  padding: 8px 4px 6px;
  border-radius: 18px;
  transition: background .25s, box-shadow .25s;
}
.bjt-seat::after {
  /* Круг на сукне под место */
  content: "";
  position: absolute;
  left: 50%; bottom: 30px;
  width: 64px; height: 64px;
  border-radius: 50%;
  border: 1.5px solid rgba(242, 193, 78, .28);
  transform: translateX(-50%);
  z-index: -1;
}
.bjt-seat.me::after { border-color: rgba(125, 255, 178, .55); box-shadow: 0 0 18px rgba(125, 255, 178, .2); }
.bjt-seat.turn { background: rgba(242, 193, 78, .1); box-shadow: 0 0 0 1px rgba(242, 193, 78, .65), 0 0 26px rgba(242, 193, 78, .22); }
.bjt-seat.away .bjt-plate { opacity: .55; }
.bjt-hands { display: flex; gap: 4px; justify-content: center; flex-wrap: wrap; --w: var(--sw); }
.bjt-hand { position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 3px; border-radius: 10px; }
.bjt-hand.cur { box-shadow: 0 0 0 1px rgba(242, 193, 78, .7); }
.bjt-hand.lost .bj-cards { filter: saturate(.6) brightness(.8); }
.bjt-hand .bj-badge { font-size: 11px; padding: 2px 8px; }
.bjt-hand .bj-tag { font-size: 10px; padding: 3px 7px; top: 30%; }
.bjt-plate {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  max-width: 100%;
  padding: 5px 9px;
  border-radius: 12px;
  background: rgba(4, 18, 10, .7);
  border: 1px solid rgba(242, 193, 78, .25);
  font-size: 12px;
}
.bjt-seat.me .bjt-plate { border-color: rgba(125, 255, 178, .6); }
.bjt-seat.empty .bjt-plate { background: transparent; border-style: dashed; }
.bjt-name { display: flex; align-items: center; gap: 5px; max-width: 100%; font-weight: 700; white-space: nowrap; }
.bjt-name .avatar { width: 18px; height: 18px; font-size: 10px; flex: none; }
.bjt-nick { overflow: hidden; text-overflow: ellipsis; }
.bjt-name .title-tag { flex: none; }
.bjt-free { color: rgba(243, 239, 226, .45); font-weight: 600; }
.bjt-betline { display: flex; align-items: center; gap: 5px; min-height: 18px; font: 700 12px var(--display); color: var(--gold-2); font-variant-numeric: tabular-nums; }
.bjt-betline .bj-chip { width: 16px; height: 16px; }
.bjt-betline .up { color: #7dffb2; }
.bjt-betline .down { color: #ff8a83; }
.bjt-betline .even { color: var(--gold-2); font-family: var(--font); font-weight: 600; }
.bjt-wait { color: var(--muted); font: 600 11px var(--font); }
.bjt-sit { padding: 5px 12px; font-size: 12px; }
.bjt-seat.empty .bjt-sit { border-color: rgba(242, 193, 78, .5); color: var(--gold-2); }

.bjt-controls { margin-top: 18px; display: flex; flex-direction: column; gap: 12px; }
.bjt-hint { margin: 0; color: var(--muted); font-weight: 600; text-align: center; }
.bjt-row { display: flex; justify-content: center; gap: 10px; flex-wrap: wrap; }
.bjt-row:not(:has(button:not([hidden]))) { display: none; }

@media (max-width: 700px) {
  .bjt-table { --w: 50px; min-height: 0; padding: 14px 6px 30px; border-radius: 24px 24px 40% 40% / 24px 24px 10% 10%; }
  .bjt-seats { --sw: 42px; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 6px 4px; }
  /* Три места сверху, два снизу по центру. */
  .bjt-seat { grid-column: span 2; transform: none !important; min-height: calc(var(--sw) * 1.4 + 74px); padding: 6px 2px 4px; }
  .bjt-seat.s3 { grid-column: 2 / span 2; }
  .bjt-seat::after { width: 48px; height: 48px; bottom: 26px; }
  .bjt-plate { padding: 4px 6px; font-size: 11px; }
  .bjt-name .avatar { display: none; }
  .bjt-hands .bj-cards .bj-card + .bj-card { margin-left: calc(var(--w) * -.55); }
}

/* ---------- Пасхалка «сикс-севен» в одиночном блэкджеке ---------- */
/* Огромные 6 и 7 вылетают с краёв и качаются на ладонях, как в меме; поверх — SIX SEVEN. Клики проходят насквозь. */

.sixseven { position: fixed; inset: 0; z-index: 90; pointer-events: none; overflow: hidden; transition: opacity .4s; }
.sixseven.out { opacity: 0; }
.ss-flash {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 45%, rgba(255, 240, 190, .6), rgba(242, 193, 78, .2) 35%, rgba(0, 0, 0, .35) 75%);
  animation: ss-flash 2.4s ease-out forwards;
}
.ss-side { position: absolute; top: 44%; translate: -50% -50%; }
.ss-left { left: calc(50% - min(24vw, 230px)); animation: ss-in-left .5s cubic-bezier(.2, 1.5, .4, 1) both; }
.ss-right { left: calc(50% + min(24vw, 230px)); animation: ss-in-right .5s cubic-bezier(.2, 1.5, .4, 1) .08s both; }
.ss-bob { display: flex; flex-direction: column; align-items: center; animation: ss-bob .56s ease-in-out .5s 4 alternate both; }
.ss-right .ss-bob { animation-name: ss-bob-r; }
.ss-num {
  font: 900 clamp(120px, 32vw, 280px) / .86 var(--display);
  background: linear-gradient(180deg, #fff3c4 0%, #f2c14e 45%, #c98f22 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  /* Контур тенями, а не text-stroke: у переменного шрифта обводка рисует швы внутри букв. */
  filter: drop-shadow(3px 0 0 #2a1b02) drop-shadow(-3px 0 0 #2a1b02) drop-shadow(0 3px 0 #2a1b02) drop-shadow(0 -3px 0 #2a1b02) drop-shadow(0 10px 0 rgba(0, 0, 0, .35)) drop-shadow(0 0 30px rgba(242, 193, 78, .65));
}
.ss-right .ss-num {
  background-image: linear-gradient(180deg, #ffd1dc 0%, #ff5d7a 45%, #c3132f 100%);
  filter: drop-shadow(3px 0 0 #3a0610) drop-shadow(-3px 0 0 #3a0610) drop-shadow(0 3px 0 #3a0610) drop-shadow(0 -3px 0 #3a0610) drop-shadow(0 10px 0 rgba(0, 0, 0, .35)) drop-shadow(0 0 30px rgba(255, 93, 122, .65));
}
/* Ладонь вверх (data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 220 110'%3E%3Cdefs%3E%3ClinearGradient id='s' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%23fbd6ad'/%3E%3Cstop offset='1' stop-color='%23d58b56'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M4 62 L40 54 L42 98 L6 104 Z' fill='%232b3a8f' stroke='%23141a44' stroke-width='4' stroke-linejoin='round'/%3E%3Cg fill='url(%23s)' stroke='%237a3e1d' stroke-width='4' stroke-linejoin='round'%3E%3Cpath d='M38 56 C60 46 90 46 120 50 L186 54 C204 55 208 70 192 72 L170 74 C190 76 194 90 176 92 L150 94 C164 98 160 108 144 106 L80 102 C56 100 42 94 40 84 Z'/%3E%3Cpath d='M70 52 C66 30 74 14 88 12 C100 11 102 24 96 34 L92 50'/%3E%3C/g%3E%3Cg stroke='%23a3592b' stroke-width='3' fill='none' stroke-linecap='round' opacity='.55'%3E%3Cpath d='M118 63 L182 63'/%3E%3Cpath d='M112 82 L170 83'/%3E%3C/g%3E%3C/svg%3E прямо в стилях): рукав, ладонь, пальцы к центру и большой палец вверх. */
.ss-palm {
  width: clamp(110px, 26vw, 230px);
  aspect-ratio: 2;
  margin-top: -14%;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 220 110'%3E%3Cdefs%3E%3ClinearGradient id='s' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%23fbd6ad'/%3E%3Cstop offset='1' stop-color='%23d58b56'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M4 62 L40 54 L42 98 L6 104 Z' fill='%232b3a8f' stroke='%23141a44' stroke-width='4' stroke-linejoin='round'/%3E%3Cg fill='url(%23s)' stroke='%237a3e1d' stroke-width='4' stroke-linejoin='round'%3E%3Cpath d='M38 56 C60 46 90 46 120 50 L186 54 C204 55 208 70 192 72 L170 74 C190 76 194 90 176 92 L150 94 C164 98 160 108 144 106 L80 102 C56 100 42 94 40 84 Z'/%3E%3Cpath d='M70 52 C66 30 74 14 88 12 C100 11 102 24 96 34 L92 50'/%3E%3C/g%3E%3Cg stroke='%23a3592b' stroke-width='3' fill='none' stroke-linecap='round' opacity='.55'%3E%3Cpath d='M118 63 L182 63'/%3E%3Cpath d='M112 82 L170 83'/%3E%3C/g%3E%3C/svg%3E") center / contain no-repeat;
  filter: drop-shadow(0 8px 10px rgba(0, 0, 0, .45));
}
.ss-right .ss-palm { transform: scaleX(-1); }
.ss-title {
  position: absolute;
  left: 50%;
  top: 76%;
  display: flex;
  gap: .4em;
  translate: -50% -50%;
  font: 900 clamp(34px, 10vw, 84px) / 1 var(--display);
  letter-spacing: .06em;
  white-space: nowrap;
  color: #fff;
  text-shadow: 2px 2px 0 #2a1b02, -2px 2px 0 #2a1b02, 2px -2px 0 #2a1b02, -2px -2px 0 #2a1b02, 0 7px 0 #c98f22, 0 0 28px rgba(242, 193, 78, .8);
  animation: ss-title .5s cubic-bezier(.2, 1.6, .4, 1) .3s both;
}
.ss-w { display: inline-block; animation: ss-bob .56s ease-in-out .8s 3 alternate both; }
.ss-w + .ss-w { animation-name: ss-bob-r; color: #ffd1dc; text-shadow: 2px 2px 0 #3a0610, -2px 2px 0 #3a0610, 2px -2px 0 #3a0610, -2px -2px 0 #3a0610, 0 7px 0 #c3132f, 0 0 28px rgba(255, 93, 122, .8); }
@keyframes ss-flash { 0% { opacity: 0; } 8% { opacity: 1; } 70% { opacity: .55; } 100% { opacity: 0; } }
@keyframes ss-in-left { from { transform: translateX(-80vw) rotate(-40deg); } to { transform: none; } }
@keyframes ss-in-right { from { transform: translateX(80vw) rotate(40deg); } to { transform: none; } }
@keyframes ss-bob { from { transform: translateY(-9%) rotate(-4deg); } to { transform: translateY(9%) rotate(3deg); } }
@keyframes ss-bob-r { from { transform: translateY(9%) rotate(4deg); } to { transform: translateY(-9%) rotate(-3deg); } }
@keyframes ss-title { from { transform: scale(2.6) rotate(-8deg); opacity: 0; } to { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .sixseven *, .sixseven *::before { animation: none !important; }
  .ss-flash { opacity: .6; }
}

/* ---------- Антитильт: утешение и кубышка (под бонусом дня) ---------- */
.tilt {
  padding: 12px 16px;
  background:
    radial-gradient(120% 160% at 0% 0%, rgba(255, 122, 182, .11), transparent 55%),
    var(--card);
}
.tilt.has-ready { border-color: rgba(255, 122, 182, .42); }
.tilt-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.tilt-row { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; gap: 12px; align-items: center; }
.tilt-row + .tilt-row { padding-top: 8px; border-top: 1px solid var(--line-2); }
.tilt-icon {
  display: grid; place-items: center;
  width: 40px; height: 40px;
  border-radius: 12px;
  font-size: 22px;
  background: rgba(255, 122, 182, .1);
  border: 1px solid rgba(255, 122, 182, .25);
}
.tilt-body { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.tilt-title { font-size: 14.5px; }
.tilt-note { font-size: 12.5px; color: var(--muted); line-height: 1.35; }
.tilt-bar { margin-top: 3px; }
.tilt-bar i { background: linear-gradient(90deg, #ff7ab6, #f2c14e); }
.tilt-soon { font-size: 13px; font-weight: 700; color: var(--gold-2); white-space: nowrap; font-variant-numeric: tabular-nums; }
.tilt-row.soon { opacity: .9; }
/* Ряд кнопок «Забрать»: сюда потом встанет вторая — «Реклама — ×2». */
.claim-row { display: inline-flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; }
.claim-take { padding: 8px 14px; font-size: 13.5px; border-radius: 10px; white-space: nowrap; }
.bonus .claim-row { flex-shrink: 0; }
@media (max-width: 560px) {
  .tilt { padding: 12px; }
  .tilt-row { grid-template-columns: 34px minmax(0, 1fr); gap: 4px 10px; }
  .tilt-icon { width: 34px; height: 34px; font-size: 19px; border-radius: 10px; }
  .tilt-row > .claim-row, .tilt-row > .tilt-soon { grid-column: 2; justify-content: flex-start; justify-self: start; }
  .bonus { flex-wrap: wrap; }
}

/* ---------- Уровни (server/levels.js) ---------- */

/* Бейдж уровня рядом с ником; цвет по десяткам: 1–9, 10–19, … 60+. */
.lvl {
  --lc: #8f9bb3;
  display: inline-grid; place-items: center; flex: none;
  min-width: 18px; height: 16px; padding: 0 4px; margin: 0 5px 0 0; border-radius: 5px;
  font: 800 10px/1 var(--font); letter-spacing: -.02em; color: #fff; vertical-align: 1px;
  background: linear-gradient(180deg, color-mix(in srgb, var(--lc) 85%, #fff), var(--lc));
  box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .3), 0 0 0 1px rgba(0, 0, 0, .25);
  text-shadow: 0 1px 0 rgba(0, 0, 0, .35);
}
.lvl.t1 { --lc: #2fae69; }
.lvl.t2 { --lc: #3b82e0; }
.lvl.t3 { --lc: #9356e0; }
.lvl.t4 { --lc: #e0782f; }
.lvl.t5 { --lc: #e0405f; }
.lvl.t6 { --lc: #d9a521; color: #2b1d00; text-shadow: none; box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .25), 0 0 8px rgba(242, 193, 78, .55); }
.list .lvl { margin: 0 -4px 0 0; }
.chat-log .lvl, #chat-log .lvl { margin: 0 4px 0 0; }
td .lvl, .b-name .lvl, .dv-tag + .lvl, .pl-name .lvl, .bjt-name .lvl { margin: 0 0 0 5px; }
.pk-head .lvl { margin: 0; }
.author.clickable { cursor: pointer; }
.author.clickable:hover { text-decoration: underline; }

/* Свой уровень в шапке: бейдж + тонкая полоска опыта. */
.me-lvl { display: inline-flex; flex-direction: column; align-items: center; gap: 3px; padding: 0; text-decoration: none; }
.me-lvl .lvl { margin: 0; height: 18px; min-width: 22px; font-size: 11px; }
.me-lvl-track { display: block; width: 28px; height: 3px; border-radius: 2px; background: rgba(255, 255, 255, .12); overflow: hidden; }
#me-lvl-bar { display: block; height: 100%; width: 0; background: var(--gold-grad); transition: width .6s; }

/* Профиль: уровень, статистика, любимые игры. */
.prof-level { display: flex; align-items: center; gap: 12px; margin: 16px 0 10px; }
.prof-level > .lvl { height: 34px; min-width: 40px; border-radius: 9px; font-size: 17px; margin: 0; }
.prof-xp { flex: 1; min-width: 0; }
.prof-xp-text { display: flex; justify-content: space-between; gap: 8px; font-size: 13px; margin-bottom: 5px; }
.prof-xp-text span { color: var(--muted); white-space: nowrap; }
.prof-xp .bar { height: 8px; border-radius: 999px; background: rgba(255, 255, 255, .07); overflow: hidden; }
.prof-xp .bar i { display: block; height: 100%; width: 0; border-radius: inherit; background: linear-gradient(90deg, #3b82e0, #8fd0ff); transition: width .5s; }
.prof-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.prof-stats > div { display: flex; flex-direction: column; gap: 2px; min-width: 0; padding: 9px 10px; border-radius: 12px; border: 1px solid var(--line); background: rgba(255, 255, 255, .03); }
.prof-stats span { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; }
.prof-stats b { font-size: 15px; overflow-wrap: anywhere; }
.prof-stats small { font-size: 11px; color: var(--muted); }
.prof-fav-head { margin: 12px 0 6px; font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; }
.prof-fav { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.prof-fav li { display: flex; gap: 8px; align-items: baseline; padding: 5px 10px; border-radius: 999px; border: 1px solid var(--line); background: rgba(255, 255, 255, .03); font-size: 13px; }
.prof-fav li span { color: var(--muted); font-size: 12px; }
.prof-fav li.muted { color: var(--muted); }
.prof-since { margin: 6px 0 0; font-size: 11px; color: var(--muted); }
@media (max-width: 480px) {
  .prof-stats { grid-template-columns: 1fr 1fr; }
  .prof-stats > div:last-child { grid-column: 1 / -1; }
}

/* Новый уровень: бейдж вылетает с ореолом, коротко. */
.lvl-pop {
  position: fixed; z-index: 71; left: 50%; top: 22px; transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: 14px 26px 12px; border-radius: 18px; min-width: 200px; text-align: center; pointer-events: none;
  background: radial-gradient(circle at 50% 30%, #1d2a4a, #0e1424); border: 1px solid rgba(143, 208, 255, .55);
  box-shadow: 0 18px 50px rgba(0, 0, 0, .55), 0 0 34px rgba(80, 160, 255, .3);
}
/* Анимируем только вылет, без прозрачности: даже если анимация не стартует, плашка видна. */
.lvl-pop.show { animation: lvl-pop-in .5s cubic-bezier(.2, 1.4, .4, 1); }
.lvl-pop.out { transition: opacity .3s, transform .3s; opacity: 0; transform: translate(-50%, -12px); }
.lvl-pop small { color: #8fd0ff; font-size: 11px; text-transform: uppercase; letter-spacing: .12em; }
.lvl-pop b { font-family: var(--display); font-size: 20px; }
.lvl-pop > span { color: var(--gold-2); font-weight: 800; font-size: 14px; min-height: 1em; }
.lvl-pop-burst { position: relative; display: grid; place-items: center; width: 64px; height: 64px; margin-bottom: 4px; }
.lvl-pop-burst::before {
  content: ""; position: absolute; inset: -14px; border-radius: 50%;
  background: repeating-conic-gradient(from 0deg, rgba(143, 208, 255, .45) 0 8deg, transparent 8deg 30deg);
  -webkit-mask: radial-gradient(circle, transparent 30%, #000 32%, transparent 70%); mask: radial-gradient(circle, transparent 30%, #000 32%, transparent 70%);
}
.lvl-pop.show .lvl-pop-burst::before { animation: lvl-rays 2.4s linear both; }
.lvl.big { height: 44px; min-width: 50px; border-radius: 12px; font-size: 22px; margin: 0; }
.lvl-pop.show .lvl.big { animation: lvl-num-in .7s cubic-bezier(.2, 1.6, .4, 1) .1s both; }
@keyframes lvl-pop-in { 0% { transform: translate(-50%, -30px) scale(.85); } 100% { transform: translate(-50%, 0); } }
@keyframes lvl-num-in { 0% { transform: scale(.5) rotate(-20deg); } 100% { transform: none; } }
@keyframes lvl-rays { 0% { opacity: 0; transform: scale(.4) rotate(0); } 20% { opacity: 1; } 100% { opacity: 0; transform: scale(1.3) rotate(90deg); } }
@media (prefers-reduced-motion: reduce) {
  .lvl-pop.show, .lvl-pop.show .lvl.big, .lvl-pop.show .lvl-pop-burst::before { animation-duration: .01s; }
}

/* ---------- Push-уведомления: приглашение на главной и окно с выключателями (public/push.js) ---------- */
.push-modal { width: min(460px, 100%); }
.push-modal h3 { margin: 0 40px 6px 0; font-family: var(--display); font-size: 20px; }
.push-modal #push-toggle { width: 100%; margin: 6px 0 14px; }
.push-types { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.push-types label { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 12px; background: rgba(255, 255, 255, .03); border: 1px solid var(--line-2); cursor: pointer; font-size: 14px; line-height: 1.3; }
.push-types label span { flex: 1; min-width: 0; }
.push-types input { appearance: none; -webkit-appearance: none; flex: none; position: relative; width: 42px; height: 24px; margin: 0; padding: 0; border-radius: 12px; border: 1px solid var(--line-2); background: rgba(255, 255, 255, .12); box-shadow: none; cursor: pointer; transition: background .15s; }
.push-types input::after { content: ""; position: absolute; top: 2px; left: 2px; width: 18px; height: 18px; border-radius: 50%; background: var(--text); transition: transform .15s; }
.push-types input:checked { background: var(--green); }
.push-types input:checked::after { transform: translateX(18px); }
.push-types input:disabled { opacity: .45; cursor: default; }
.push-types.off label { opacity: .6; }
.push-rules { margin: 14px 0 0; }
#me-push.on { text-shadow: 0 0 10px rgba(242, 193, 78, .7); }
.push-modal .push-app { width: 100%; margin: -6px 0 14px; font-size: 14px; }

/* ---------- Приложение: полоска «📲 Приложение» на главной и окно установки (public/install.js) ---------- */
.home-app {
  display: flex; align-items: center; gap: 12px; width: 100%; padding: 10px 12px 10px 10px; text-align: left;
  border: 1px solid rgba(242, 193, 78, .45); border-radius: var(--radius); color: var(--text); box-shadow: none;
  background: linear-gradient(135deg, rgba(242, 193, 78, .1), rgba(255, 255, 255, .02)); cursor: pointer;
}
.home-app:hover { border-color: var(--gold); }
.home-app img { flex: none; border-radius: 10px; }
.home-app-words { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.home-app-title { font-size: 15px; }
.home-app-sub { color: var(--muted); font-size: 13px; font-weight: 400; line-height: 1.3; }
.home-app-pill { flex: none; padding: 7px 14px; border-radius: 999px; background: var(--gold); color: #1a1205; font-size: 14px; font-weight: 700; }
.home-app.done { border-color: var(--line-2); background: rgba(255, 255, 255, .02); }
.home-app.done .home-app-pill { background: none; border: 1px solid var(--line-2); color: var(--muted); font-weight: 600; }
@media (max-width: 420px) {
  .home-app { gap: 10px; }
  .home-app img { display: none; }
  .home-app-pill { padding: 6px 10px; font-size: 13px; }
}
.app-modal { width: min(480px, 100%); }
.app-modal h3 { margin: 0 40px 6px 0; font-family: var(--display); font-size: 20px; }
.app-status { margin: 0 0 12px; }
.app-install { width: 100%; margin: 0 0 14px; padding: 14px; font-size: 17px; }
.app-why { margin: 0 0 14px; padding-left: 20px; color: var(--muted); font-size: 14px; line-height: 1.4; }
.app-why li + li { margin-top: 4px; }
.app-guides { display: flex; flex-direction: column; gap: 6px; }
.app-guides details { border: 1px solid var(--line-2); border-radius: 12px; background: rgba(255, 255, 255, .03); }
.app-guides summary { padding: 10px 12px; cursor: pointer; font-weight: 700; }
.app-guides details[open] summary { color: var(--gold-2); }
.app-guides ol { margin: 0; padding: 0 14px 12px 34px; font-size: 14px; line-height: 1.45; }
.app-guides b { color: var(--gold-2); }
.push-card .row button { flex: 1 1 auto; }
@media (max-width: 560px) {
  .push-card .row { gap: 6px; flex-wrap: nowrap; }
  .push-card .row button { padding-left: 10px; padding-right: 10px; font-size: 14px; }
}

/* ---------- Единая оболочка: баланс в шапке и панель звука ---------- */

/* Баланс досчитывается в client.js (showBalance); «+сумма» на крупном плюсе выпадает под число. */
.me-chips { position: relative; }
.bal-pop {
  position: absolute; left: 50%; top: 100%; margin-top: 4px;
  padding: 2px 8px; border-radius: 999px; white-space: nowrap; pointer-events: none;
  font-family: var(--display); font-weight: 800; font-size: 13px; color: #0b2e1d;
  background: linear-gradient(180deg, #a6ffc4, #3ddc84); box-shadow: 0 4px 14px rgba(61, 220, 132, .45);
  opacity: 0; transform: translateX(-50%);
}

#sound.off { opacity: .6; }
.snd-panel {
  position: fixed; z-index: 140;
  top: 66px; right: max(16px, calc((100vw - 1180px) / 2));
  width: 300px; padding: 14px 16px 16px;
  border-radius: 16px; background: rgba(10, 22, 15, .97);
  border: 1px solid var(--line); box-shadow: 0 16px 40px rgba(0, 0, 0, .55);
  font-size: 14px;
  animation: snd-in .16s ease-out;
}
@keyframes snd-in { from { opacity: 0; transform: translateY(-6px); } }
.snd-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; font-family: var(--display); font-size: 14px; color: var(--gold-2); }
.snd-close { font-size: 16px; padding: 4px 6px; color: var(--muted); }
.snd-row { display: block; padding: 8px 0 2px; cursor: pointer; }
.snd-name { display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; font-weight: 700; }
.snd-name i { font-style: normal; }
.snd-name small { flex-basis: 100%; padding-left: 24px; font-weight: 500; font-size: 12px; color: var(--muted); }
.snd-row input[type="range"] { display: block; width: 100%; height: 26px; margin: 2px 0 0; padding: 0; border: 0; background: none; box-shadow: none; accent-color: var(--gold); cursor: pointer; }
.snd-row.zero .snd-name { opacity: .5; }
.snd-theme { margin: 6px 0 2px; padding: 8px 10px; border-radius: 12px; background: rgba(242, 193, 78, .06); border: 1px dashed var(--line); }
.snd-th-list { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.snd-th { flex: 1 1 auto; padding: 6px 9px; border-radius: 10px; font-size: 13px; font-weight: 600; color: var(--muted); background: rgba(255, 255, 255, .04); border: 1px solid var(--line); box-shadow: none; }
.snd-th[aria-pressed="true"] { color: var(--gold-2); border-color: rgba(242, 193, 78, .6); background: rgba(242, 193, 78, .12); }
.snd-th-auto { flex-basis: 100%; }
.snd-mute { width: 100%; margin-top: 12px; }
.snd-mute.on { color: var(--gold-2); border-color: rgba(242, 193, 78, .5); }
@media (max-width: 700px) {
  .snd-panel { top: 54px; right: 10px; left: 10px; width: auto; }
}

/* ---------- Общий джекпот зала (jackpot.js) ---------- */
/* Главная: заметный счётчик сверху; слоты: тонкая полоска над барабанами. Полоса — путь от зерна до потолка. */
.jp-home {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 6px 18px; padding: 16px 20px;
  background:
    radial-gradient(90% 160% at 12% 50%, rgba(255, 210, 90, .22), transparent 60%),
    linear-gradient(180deg, rgba(48, 34, 8, .92), rgba(20, 14, 4, .92));
  border-color: rgba(242, 193, 78, .65);
  box-shadow: var(--shadow), 0 0 40px rgba(242, 193, 78, .12) inset;
  overflow: hidden;
}
.jp-home::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(105deg, transparent 40%, rgba(255, 236, 170, .14) 50%, transparent 60%);
  transform: translateX(-100%); animation: jp-shine 5s ease-in-out infinite;
}
@keyframes jp-shine { 0%, 55% { transform: translateX(-100%); } 85%, 100% { transform: translateX(100%); } }
.jp-coin { font-size: 46px; line-height: 1; filter: drop-shadow(0 4px 10px rgba(242, 193, 78, .45)); animation: jp-bob 3.2s ease-in-out infinite; }
@keyframes jp-bob { 50% { transform: translateY(-4px) rotate(-6deg); } }
.jp-info { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.jp-label { font-size: 12px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--gold); }
.jp-value { font-family: var(--display); font-size: clamp(28px, 6cqi, 40px); line-height: 1.05; font-variant-numeric: tabular-nums; color: var(--gold-2); text-shadow: 0 2px 18px rgba(242, 193, 78, .35); white-space: nowrap; }
.jp-bar { position: relative; display: block; height: 5px; border-radius: 99px; background: rgba(255, 255, 255, .1); overflow: hidden; }
.jp-bar i { position: absolute; inset: 0; transform-origin: left; transform: scaleX(0); background: var(--gold-grad); border-radius: inherit; transition: transform .9s linear; }
.jp-note { margin: 2px 0 0; color: var(--muted); font-size: 13px; }
.jp-go { align-self: center; }
.jp-home.jp-reset .jp-value, .jp-strip.jp-reset .jp-value { animation: jp-flash 1.2s ease-out; }
@keyframes jp-flash { 0% { color: #fff; text-shadow: 0 0 24px #fff; } 100% { } }

.jp-strip {
  display: flex; align-items: center; gap: 10px; padding: 6px 14px; border-radius: var(--radius) var(--radius) 0 0;
  background: linear-gradient(90deg, rgba(40, 28, 6, .96), rgba(18, 12, 4, .96)); border-bottom: 1px solid rgba(242, 193, 78, .45);
}
.jp-strip .jp-label { flex: none; font-size: 11px; }
.jp-strip .jp-value { flex: none; font-size: 17px; text-shadow: none; }
.jp-strip .jp-bar { flex: 1 1 auto; height: 4px; min-width: 40px; }
.kraken > .jp-strip + .kr-stage { border-radius: 0; }

@media (max-width: 520px) {
  .jp-home { grid-template-columns: auto minmax(0, 1fr); padding: 14px 14px; gap: 4px 12px; }
  .jp-coin { font-size: 36px; grid-row: span 2; }
  .jp-go { grid-column: 2; justify-self: start; padding: 8px 16px; }
  .jp-note { font-size: 12px; }
  .jp-strip { gap: 8px; padding: 5px 10px; }
}

/* Плашка для остальных: золотая, больше обычной. */
.bw-card.bw-jp { border-color: var(--gold-2); box-shadow: 0 14px 40px rgba(0, 0, 0, .55), 0 0 36px rgba(242, 193, 78, .45); }
.bw-jp-title { display: block; margin-bottom: 2px; font-weight: 800; color: var(--gold-2); letter-spacing: .02em; }

/* Победитель: большая анимация на весь экран. Только transform/opacity — видно и на слабом телефоне. */
.jp-win {
  position: fixed; inset: 0; z-index: 260; display: grid; place-items: center; padding: 16px; overflow: hidden;
  background: radial-gradient(circle at 50% 45%, rgba(70, 48, 6, .9), rgba(4, 8, 6, .94) 70%);
  animation: jp-fade .35s ease-out; transition: opacity .4s;
}
.jp-win.out { opacity: 0; }
@keyframes jp-fade { from { opacity: 0; } }
.jp-rays {
  position: absolute; left: 50%; top: 45%; width: 170vmax; height: 170vmax; margin: -85vmax 0 0 -85vmax; pointer-events: none;
  background: repeating-conic-gradient(rgba(255, 214, 110, .16) 0deg 8deg, transparent 8deg 22deg);
  -webkit-mask: radial-gradient(circle, #000 0%, transparent 62%); mask: radial-gradient(circle, #000 0%, transparent 62%);
  animation: jp-spin 24s linear infinite;
}
@keyframes jp-spin { to { transform: rotate(360deg); } }
.jp-rain { position: absolute; inset: 0; pointer-events: none; }
.jp-drop { position: absolute; top: -60px; animation: jp-fall 3s linear infinite both; }
@keyframes jp-fall { from { transform: translateY(0) rotate(0); } to { transform: translateY(calc(100vh + 120px)) rotate(540deg); } }
.jp-win-card { position: relative; display: flex; flex-direction: column; align-items: center; gap: 10px; max-width: 560px; text-align: center; animation: jp-pop .7s cubic-bezier(.2, 1.6, .4, 1); }
@keyframes jp-pop { from { transform: scale(.4); opacity: 0; } }
.jp-win-coin { font-size: 84px; line-height: 1; filter: drop-shadow(0 8px 24px rgba(242, 193, 78, .7)); animation: jp-bob 1.6s ease-in-out infinite; }
.jp-win-title { display: flex; flex-wrap: wrap; justify-content: center; gap: 0 .35em; font-family: var(--display); font-weight: 800; font-size: clamp(38px, 11vw, 76px); line-height: 1.02; }
.jp-win-word {
  background: linear-gradient(180deg, #fff6d0 0%, #ffd766 40%, #e09a1c 75%, #ffe9a8 100%); -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 4px 0 #6a4405) drop-shadow(0 0 22px rgba(255, 200, 80, .55));
  animation: jp-drop-in .6s cubic-bezier(.2, 1.7, .4, 1) both;
}
@keyframes jp-drop-in { from { transform: translateY(-80px) scale(1.6); opacity: 0; } }
.jp-win-sum { font-family: var(--display); font-size: clamp(34px, 9vw, 60px); color: #fff; font-variant-numeric: tabular-nums; text-shadow: 0 0 26px rgba(255, 214, 110, .8); }
.jp-win-sum.done { animation: jp-throb .6s ease-out; }
@keyframes jp-throb { 40% { transform: scale(1.12); } }
.jp-win-sub { color: var(--gold-2); font-size: 16px; max-width: 30ch; }
.jp-win-ok { margin-top: 8px; min-width: 160px; font-size: 17px; }
@media (prefers-reduced-motion: reduce) {
  .jp-home::after, .jp-coin, .jp-rays, .jp-win-coin { animation: none; }
  .jp-drop { display: none; }
}