/* ═══ KVN Casino — тема v4: тёмно-фиолетовая, крупные скругления, мятная главная кнопка ═══ */
:root {
  --bg: #12071d; --panel: #1d0f2e; --panel2: #2d1941; --panel3: #3a2152; --line: #3a2452;
  --text: #ffffff; --muted: #a996bf; --mint: #31e99a; --mint-ink: #08170f; --purple: #8a3cf0; --gold: #ffcf5a;
  --radius: 20px;
}
html, body { background: var(--bg); color: var(--text); }
body {
  font-family: Inter, ui-rounded, "SF Pro Rounded", "Segoe UI", Arial, sans-serif;
  background: radial-gradient(circle at 12% 0%, #7624c233, transparent 420px), radial-gradient(circle at 92% 30%, #4a1a8a22, transparent 520px), var(--bg);
  background-attachment: fixed;
}

/* ─── шапка ─── */
.top { background: #12071de6; border-bottom: 1px solid #ffffff0d; backdrop-filter: blur(14px); min-height: 72px; }
.logo { align-items: center !important; gap: 8px !important; }
.logo::before {
  content: "K"; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px;
  background: linear-gradient(145deg, #b46bff, #6a22d8); color: #fff; font-weight: 900; font-size: 19px;
  box-shadow: 0 6px 18px #8a3cf055, inset 0 1px 0 #ffffff55;
}
.logo b { color: #fff !important; font-size: 24px !important; letter-spacing: -.5px !important; }
.logo span { color: #fff !important; font-size: 16px !important; font-weight: 800 !important; letter-spacing: .06em !important; }
.logo small { display: none; }
.header-caption { color: var(--muted); }
.bal { background: var(--panel2) !important; box-shadow: none !important; border-radius: 14px !important; min-height: 44px !important; padding: 8px 14px !important; }
.bal > span { color: var(--mint) !important; }
.bal b { color: #fff !important; font-size: 16px; font-weight: 800; }
.who { color: #e9dcf7 !important; font-weight: 600; }
.login-button { background: var(--mint) !important; color: var(--mint-ink) !important; border: 0 !important; border-radius: 14px !important; padding: 12px 20px !important; font-weight: 800 !important; font-size: 14px !important; box-shadow: 0 6px 20px #31e99a33; }
.login-button:hover { filter: brightness(1.08); }

/* ─── левая панель игр ─── */
.casino-rail { background: #160a24 !important; border-right: 1px solid #ffffff0d !important; }
.rail-brand { background: linear-gradient(145deg, #b46bff, #6a22d8) !important; border-radius: 12px !important; }
.tabs button { color: #a996bf; border-radius: 14px !important; }
.tabs button:hover { background: var(--panel2) !important; color: #fff; }
.tabs button.on { background: var(--panel2) !important; color: var(--mint) !important; box-shadow: inset 0 0 0 1px #31e99a55 !important; }
.tabs button.on small { color: #fff; }

/* ─── общие панели, кнопки, поля ─── */
.panel, .view, .slot { background: var(--panel) !important; border-radius: var(--radius) !important; border: 1px solid #ffffff0a; }
input, select { background: var(--panel2) !important; border: 1px solid transparent !important; border-radius: 12px !important; color: #fff !important; }
input:focus, select:focus { outline: 2px solid #31e99a88 !important; }
.go { border-radius: 14px !important; font-weight: 800 !important; letter-spacing: .01em; }
.go:not(.red):not(.orange):not(.gray) { background: var(--mint) !important; color: var(--mint-ink) !important; box-shadow: 0 8px 24px #31e99a30 !important; }
.go:not(:disabled):hover { filter: brightness(1.07); }
.chips button, .speeds button { border-radius: 12px !important; }
.chips button.on, .speeds button.on { background: var(--panel3) !important; box-shadow: inset 0 0 0 1.5px var(--mint) !important; }
.back-lobby { background: var(--panel2) !important; color: #fff !important; border-radius: 100px !important; padding: 9px 16px !important; font-weight: 700; }
.game-page-head h1 { font-size: 22px !important; font-weight: 800; }

/* ─── лента раундов справа ─── */
.side { background: var(--panel) !important; border: 1px solid #ffffff0a !important; border-radius: var(--radius) !important; }
.side-tabs button { border-radius: 100px !important; font-weight: 700; }
.side-tabs button.on { background: var(--panel3) !important; color: #fff !important; }
.fi { background: var(--panel2) !important; border-radius: 12px !important; padding: 8px 10px !important; }
.fi .p.win, .fi .p.big { color: var(--mint); font-weight: 800; }
.fi .p.big { text-shadow: 0 0 12px #31e99a88; }
.fi .p.lose { color: #b9a7cc; }
.live-dot { background: var(--mint) !important; box-shadow: 0 0 0 3px #31e99a22, 0 0 10px var(--mint) !important; }

/* ─── Самолётик: панель управления в тон ─── */
.plane-cockpit { background: var(--panel) !important; border-top: 1px solid #ffffff0d !important; }
.plane-meters { background: var(--panel2) !important; border: 0 !important; border-radius: 14px !important; }
.plane-meters > div + div { border-left-color: #ffffff12 !important; }
.plane-launch { background: var(--mint) !important; color: var(--mint-ink) !important; border: 0 !important; box-shadow: 0 0 0 6px #31e99a22, 0 10px 30px #31e99a40 !important; }
.plane-launch.stop { background: #ff4d6d !important; color: #fff !important; box-shadow: 0 0 0 6px #ff4d6d22 !important; }

/* ─── Мины ─── */
.tile { background: linear-gradient(180deg, #3a2152, #2a1640) !important; box-shadow: inset 0 -4px 0 #1a0c29 !important; border-radius: 14px !important; }
.tile:not(:disabled):hover { background: linear-gradient(180deg, #4a2a68, #341b4f) !important; }
.tile.gem { background: radial-gradient(circle at 50% 40%, #1f8a5e, #0d3f2c) !important; box-shadow: inset 0 0 0 2px var(--mint), 0 0 18px #31e99a40 !important; }
.tile.bomb { background: radial-gradient(circle at 50% 40%, #8a1f3a, #3b0f1c) !important; box-shadow: inset 0 0 0 2px #ff4d6d, 0 0 18px #ff4d6d40 !important; }

/* ─── подвал ─── */
.casino-footer { display: block !important; max-width: 1220px; margin: 30px auto 0 !important; padding: 28px 30px 30px !important; border-top: 1px solid #ffffff0d; color: var(--muted); }
.foot-cols { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 28px; }
.foot-brand b { display: flex; align-items: center; gap: 8px; color: #fff; font-size: 18px; font-weight: 900; margin-bottom: 10px; }
.foot-brand b::before { content: "K"; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 8px; background: linear-gradient(145deg, #b46bff, #6a22d8); font-size: 15px; }
.foot-brand p { margin: 0; font-size: 12px; line-height: 1.6; max-width: 320px; }
.foot-cols h4 { margin: 0 0 12px; color: #fff; font-size: 14px; }
.foot-cols a { display: block; color: var(--muted); font-size: 13px; text-decoration: none; margin-bottom: 8px; }
.foot-cols a:hover { color: #fff; }
.foot-bottom { display: flex; justify-content: space-between; gap: 16px; margin-top: 24px; padding-top: 18px; border-top: 1px solid #ffffff0d; font-size: 11px; }
.foot-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--mint); margin-right: 6px; box-shadow: 0 0 8px var(--mint); }

/* ═══ ЛОББИ ═══ */
.at-lobby .layout { max-width: 1260px !important; }
.mell-lobby { display: grid; gap: 22px; }
.mell-promos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.mell-promo {
  position: relative; overflow: hidden; min-height: 210px; border-radius: 26px; padding: 26px 24px;
  display: flex; color: #fff; text-decoration: none; isolation: isolate;
  box-shadow: inset 0 1px 0 #ffffff26, 0 14px 40px #0006; transition: transform .2s, box-shadow .2s;
}
.mell-promo:hover { transform: translateY(-3px); box-shadow: inset 0 1px 0 #ffffff33, 0 20px 50px #0008; }
.mell-promo::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(circle at 80% 60%, #ffffff33, transparent 55%); }
.promo-plane { background: linear-gradient(135deg, #8b3cff, #5a1fc4 55%, #2c0f6b); }
.promo-crash { background: linear-gradient(135deg, #ff3d8b, #a0249a 55%, #3b0f5c); }
.promo-mines { background: linear-gradient(135deg, #18c48f, #1a6f9e 55%, #24105a); }
.mell-promo-text { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: flex-start; max-width: 62%; }
.mell-eyebrow { font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .1em; opacity: .85; margin-bottom: 8px; }
.mell-promo h2 { margin: 0 0 auto; font-size: clamp(19px, 1.9vw, 25px); line-height: 1.15; font-weight: 800; letter-spacing: -.4px; text-shadow: 0 2px 12px #0005; }
.mell-ghost { margin-top: 18px; background: #ffffff2b; backdrop-filter: blur(6px); padding: 12px 22px; border-radius: 14px; font-weight: 700; font-size: 15px; transition: background .2s; }
.mell-promo:hover .mell-ghost { background: #ffffff40; }
.mell-promo-art { position: absolute; z-index: 1; right: -8%; bottom: -10%; width: 62%; filter: drop-shadow(0 18px 24px #0007); animation: mell-float 4.5s ease-in-out infinite; }
.promo-crash .mell-promo-art { right: -4%; bottom: -4%; width: 56%; animation-delay: -1.5s; }
.promo-mines .mell-promo-art { right: -2%; bottom: -6%; width: 54%; animation-delay: -3s; }
@keyframes mell-float { 0%, 100% { transform: translateY(0) rotate(-2deg); } 50% { transform: translateY(-8px) rotate(2deg); } }

.mell-cats { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; }
.mell-cat {
  position: relative; overflow: hidden; height: 142px; border-radius: 26px; background: var(--panel2);
  text-align: left; padding: 20px 22px; color: #fff; font-size: 18px; font-weight: 700;
  display: flex; align-items: flex-start; transition: background .2s, transform .2s, box-shadow .2s;
}
.mell-cat span { position: relative; z-index: 2; }
.mell-cat:hover { background: var(--panel3); transform: translateY(-2px); }
.mell-cat.on { background: linear-gradient(160deg, #3f2260, #2d1941); box-shadow: inset 0 0 0 2px var(--mint), 0 0 24px #31e99a22; }
.mell-cat-art { position: absolute; right: -6px; bottom: -12px; width: 108px; height: 108px; object-fit: contain; filter: drop-shadow(0 10px 14px #0006); transition: transform .25s; }
.mell-cat:hover .mell-cat-art { transform: scale(1.08) rotate(-4deg); }

.mell-games-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 6px; scroll-margin-top: 90px; }
.mell-games-title { display: flex; align-items: center; gap: 12px; }
.mell-games-title h2 { margin: 0; font-size: 26px; font-weight: 800; letter-spacing: -.5px; }
.mell-count { background: var(--panel2); border-radius: 100px; padding: 7px 14px; font-size: 13px; font-weight: 700; color: #e6d8f5; }
.mell-search { display: flex; align-items: center; gap: 4px; background: var(--panel2); border-radius: 100px; padding: 0 6px 0 16px; width: min(300px, 45%); color: var(--muted); }
.mell-search .ui-icon { width: 18px; height: 18px; flex: none; }
.mell-search input { background: transparent !important; border: 0 !important; outline: none !important; width: 100%; padding: 12px 10px !important; font-size: 14px; }

.mell-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(168px, 1fr)); gap: 14px; }
.mell-card { position: relative; border-radius: 22px; overflow: hidden; aspect-ratio: 3 / 4; isolation: isolate; box-shadow: inset 0 1px 0 #ffffff26, 0 10px 30px #0005; transition: transform .2s, box-shadow .2s; }
.mell-card > a { position: absolute; inset: 0; color: #fff; text-decoration: none; }
.mell-card:hover { transform: translateY(-5px) scale(1.015); box-shadow: inset 0 1px 0 #ffffff33, 0 18px 40px #0008, 0 0 0 2px #ffffff22; }
.mell-card::after { content: ""; position: absolute; inset: 45% 0 0; background: linear-gradient(transparent, #0b0414e6); pointer-events: none; z-index: 1; }
.card-plane { background: radial-gradient(circle at 50% 30%, #a35cff, #5a1fc4 55%, #23094f); }
.card-crash { background: radial-gradient(circle at 50% 30%, #ff5c9a, #a3248f 55%, #33093f); }
.card-mines { background: radial-gradient(circle at 50% 30%, #2fe0a8, #187a8f 55%, #10234a); }
.card-plinko { background: radial-gradient(circle at 50% 30%, #e05cff, #8a24b8 55%, #2e0a52); }
.card-upgrade { background: radial-gradient(circle at 50% 30%, #ffb347, #c25a2a 50%, #3d1240); }
.card-bj { background: radial-gradient(circle at 50% 30%, #5c8aff, #3a2fc4 55%, #170c4f); }
.card-poker { background: radial-gradient(circle at 50% 30%, #ff5c6e, #b8243f 55%, #3a0a24); }
.mell-card-art { position: absolute; inset: 0 0 26%; display: grid; place-items: center; }
.mell-card-art img { width: 84%; max-height: 100%; object-fit: contain; filter: drop-shadow(0 14px 18px #0007); transition: transform .3s; }
.card-mines .mell-card-art img.a0 { width: 62%; transform: translate(-18%, -8%) rotate(-10deg); }
.card-mines .mell-card-art img.a1 { position: absolute; width: 50%; right: 4%; bottom: 0; }
.mell-card:hover .mell-card-art img { transform: scale(1.06) rotate(-3deg); }
.card-mines:hover .mell-card-art img.a0 { transform: translate(-18%, -12%) rotate(-14deg) scale(1.05); }
.mell-card-name { position: absolute; z-index: 2; left: 10px; right: 10px; bottom: 14px; text-align: center; display: grid; gap: 2px; }
.mell-card-name b { font-size: clamp(17px, 1.6vw, 22px); font-weight: 900; line-height: 1; letter-spacing: -.3px; text-shadow: 0 3px 0 #0006, 0 0 18px #0008; }
.mell-card-name small { font-size: 10px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: #ffffffb3; }
.mell-card-play {
  position: absolute; z-index: 3; left: 50%; top: 46%; transform: translate(-50%, -50%) scale(.85); opacity: 0;
  display: inline-flex; align-items: center; gap: 6px; background: var(--mint); color: var(--mint-ink);
  padding: 11px 18px; border-radius: 14px; font-weight: 800; font-size: 14px; box-shadow: 0 10px 26px #0007; transition: opacity .18s, transform .18s;
}
.mell-card-play .ui-icon { width: 13px; height: 13px; }
.mell-card:hover .mell-card-play, .mell-card > a:focus-visible .mell-card-play { opacity: 1; transform: translate(-50%, -50%) scale(1); }
.mell-fav { position: absolute; z-index: 4; top: 10px; right: 10px; width: 34px; height: 34px; display: grid; place-items: center; border-radius: 12px; background: #0b041466; backdrop-filter: blur(6px); color: #ffe08a; }
.mell-fav .ui-icon { width: 17px; height: 17px; }
.mell-fav[aria-pressed="true"] { background: #ffcf5a; color: #3a2400; }
.at-lobby .side { border-radius: 24px !important; }

/* ─── адаптив ─── */
@media (max-width: 1100px) {
  .mell-cats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .mell-cat:nth-child(n+4) { height: 110px; }
}
@media (max-width: 860px) {
  .mell-promos { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 84%; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; margin-inline: -4px; padding: 4px; }
  .mell-promos::-webkit-scrollbar { display: none; }
  .mell-promo { scroll-snap-align: start; min-height: 200px; }
  .foot-cols { grid-template-columns: 1fr 1fr; }
  .foot-brand { grid-column: 1 / -1; }
}
@media (max-width: 650px) {
  .top { min-height: 62px; }
  .logo::before { width: 30px; height: 30px; font-size: 17px; }
  .logo b { font-size: 20px !important; }
  .logo span { font-size: 13px !important; }
  .mell-lobby { gap: 18px; }
  .mell-cats { grid-template-columns: 1fr 1fr; gap: 10px; }
  .mell-cat, .mell-cat:nth-child(n+4) { height: 118px; font-size: 17px; padding: 16px 18px; }
  .mell-cat:last-child { grid-column: 1 / -1; }
  .mell-cat-art { width: 92px; height: 92px; }
  .mell-games-head { flex-wrap: wrap; }
  .mell-games-title h2 { font-size: 22px; }
  .mell-search { width: 100%; }
  .mell-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
  .mell-card { border-radius: 18px; }
  .mell-card-play { display: none; }
  .casino-rail { background: #160a24f2 !important; border-top: 1px solid #ffffff12 !important; }
  .casino-footer { padding: 22px 16px 26px !important; }
  .foot-bottom { flex-direction: column; }
}
@media (prefers-reduced-motion: reduce) {
  .mell-promo-art { animation: none; }
  .mell-card, .mell-promo, .mell-cat, .mell-card-art img { transition: none; }
}

/* ═══ Рулетка ═══ */
.card-roulette { background: radial-gradient(circle at 50% 30%, #2fd68a, #15805a 55%, #0b2e2a); }
.promo-roulette { background: linear-gradient(135deg, #1fc77f, #16797a 50%, #2a0f5c); }
.promo-roulette .mell-promo-art { right: -6%; bottom: -14%; width: 58%; animation-delay: -1.5s; }
.roul-board { display: grid; gap: 16px; align-content: start; }
.roul-top { display: grid; grid-template-columns: minmax(200px, 270px) 1fr; gap: 20px; align-items: center; }
.roul-wheel-wrap { position: relative; }
.roul-wheel { display: block; width: 100%; aspect-ratio: 1; filter: drop-shadow(0 16px 28px #0009); }
.roul-info { display: grid; gap: 10px; min-width: 0; }
.roul-res { display: flex; align-items: center; gap: 16px; background: var(--panel2); border-radius: 20px; padding: 14px 18px; }
.roul-res-num { width: 64px; height: 64px; flex: none; display: grid; place-items: center; border-radius: 50%; font-size: 28px; font-weight: 900;
  background: #3a2152; color: #fff; box-shadow: inset 0 -4px 0 #0004; }
.roul-res-num.red { background: radial-gradient(circle at 40% 30%, #ff4d6d, #c3112f); box-shadow: 0 0 24px #ff2f5560, inset 0 -4px 0 #0004; }
.roul-res-num.black { background: radial-gradient(circle at 40% 30%, #3b2d4d, #120a1c); box-shadow: 0 0 0 2px #ffffff22, inset 0 -4px 0 #0006; }
.roul-res-num.green { background: radial-gradient(circle at 40% 30%, #46f0a8, #13a865); box-shadow: 0 0 24px #31e99a60, inset 0 -4px 0 #0004; }
.roul-res-text { font-size: 20px; font-weight: 800; color: #e9dcf7; }
.roul-res-text .win { color: var(--mint); text-shadow: 0 0 16px #31e99a66; }
.roul-res-text .win small { font-size: 13px; color: #d9fff0; }
.roul-res-text .lose { color: #b9a7cc; font-size: 17px; }
.roul-hist-title { color: var(--muted); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; }
.roul-hist { display: flex; flex-wrap: wrap; gap: 6px; min-height: 30px; }
.rh { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 9px; font-size: 13px; font-weight: 800; color: #fff; }
.rh.red { background: #d8173d; } .rh.black { background: #1c1229; box-shadow: inset 0 0 0 1px #ffffff1f; } .rh.green { background: #14a862; }
.rh.new { animation: roul-pop .4s cubic-bezier(.3, 1.6, .5, 1); }
@keyframes roul-pop { from { transform: scale(.3); opacity: 0; } }

.roul-table { display: grid; grid-template-columns: 1.15fr repeat(12, minmax(0, 1fr)) 1.15fr; grid-template-rows: repeat(3, 46px) 40px 40px;
  gap: 4px; padding: 12px; border-radius: 22px; background: radial-gradient(circle at 50% 0%, #2c1745, #1a0d2a); box-shadow: inset 0 0 0 1px #ffffff12; }
.rc { grid-row: var(--r); grid-column: var(--c); position: relative; display: grid; place-items: center; min-width: 0; padding: 0;
  border-radius: 9px; background: var(--panel2); color: #fff; font-weight: 800; font-size: 14px; transition: transform .12s, box-shadow .15s, filter .15s; }
.rc:not(:disabled):hover { filter: brightness(1.18); }
.rc:active { transform: scale(.96); }
.rc.red { background: linear-gradient(180deg, #ef2448, #c0102f); }
.rc.black { background: linear-gradient(180deg, #2a1e38, #150d20); }
.rc.green { background: linear-gradient(180deg, #22c97a, #129158); font-size: 18px; }
.rc.out { background: #2a1840; box-shadow: inset 0 0 0 1px #ffffff14; font-size: 13px; }
.rc.half.red::before, .rc.half.black::before { content: ""; width: 24px; height: 24px; transform: rotate(45deg); border-radius: 4px; }
.rc.half.red { background: #2a1840; } .rc.half.red::before { background: #ef2448; box-shadow: 0 0 12px #ef244880; }
.rc.half.black { background: #2a1840; } .rc.half.black::before { background: #0e0816; box-shadow: inset 0 0 0 1.5px #ffffff40; }
.rc.half.red .rc-l, .rc.half.black .rc-l { display: none; }
.rc.hl { box-shadow: inset 0 0 0 2px #ffffffcc; filter: brightness(1.2); }
.rc-chip { position: absolute; z-index: 2; left: 50%; top: 50%; translate: -50% -50%; min-width: 28px; height: 28px; padding: 0 4px; border-radius: 99px;
  display: grid; place-items: center; font-size: 10px; font-weight: 900; color: #fff; pointer-events: none;
  border: 2.5px dashed #ffffffcc; box-shadow: 0 3px 8px #0009, inset 0 0 0 3px #0002; animation: roul-pop .22s cubic-bezier(.3, 1.6, .5, 1); }
.rc-chip.t0, .roul-chip.t0 { background: #8e86a3; } .rc-chip.t1, .roul-chip.t1 { background: #3f6bff; }
.rc-chip.t2, .roul-chip.t2 { background: #18b874; } .rc-chip.t3, .roul-chip.t3 { background: #8a3cf0; }
.rc-chip.t4, .roul-chip.t4 { background: #e3173f; } .rc-chip.t5, .roul-chip.t5 { background: #e6a417; color: #2a1600; }
.rc-chip.t6, .roul-chip.t6 { background: #12091c; }
.roul-table.locked .rc { cursor: default; }
.rc.dozen .rc-chip, .rc.half .rc-chip { left: auto; right: 6px; translate: 0 -50%; }
.rc.black.num { box-shadow: inset 0 0 0 1px #ffffff12; }
.rc.hit { box-shadow: 0 0 0 3px #fff, 0 0 26px #ffffffaa; z-index: 3; animation: roul-hit 1s ease-in-out 2; }
@keyframes roul-hit { 50% { transform: scale(1.12); } }
.rc.win { box-shadow: inset 0 0 0 2.5px var(--mint), 0 0 18px #31e99a66; }
.rc.lose .rc-chip { opacity: .35; filter: grayscale(.7); }

.roul-chips { display: grid; grid-template-columns: repeat(4, 1fr); gap: 7px; margin-bottom: 10px; }
.roul-chip { aspect-ratio: 1; border-radius: 50%; display: grid; place-items: center; font-size: 11px; font-weight: 900; color: #fff;
  border: 2.5px dashed #ffffffb3; box-shadow: 0 3px 8px #0007, inset 0 0 0 3px #0002; transition: transform .15s; }
.roul-chip:hover { transform: translateY(-2px); }
.roul-chip.on { outline: 2.5px solid var(--mint); outline-offset: 2px; transform: translateY(-2px) scale(1.06); }
.roul-own { display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: 12px; font-weight: 700; margin-bottom: 4px; }
.roul-own input { flex: 1; min-width: 0; padding: 8px 10px; font-weight: 800; }
.roul-acts { display: grid; grid-template-columns: 1fr 1fr .7fr; gap: 6px; margin-top: 8px; }
.roul-acts button { background: var(--panel3); color: #fff; border-radius: 10px; padding: 9px 4px; font-size: 12px; font-weight: 700; }
.roul-acts button:not(:disabled):hover { filter: brightness(1.15); }
.roul-acts button:disabled, .roul-spin:disabled { opacity: .55; }

@media (max-width: 1100px) {
  .roul-top { grid-template-columns: minmax(180px, 230px) 1fr; }
}
@media (max-width: 650px) {
  .roul-top { grid-template-columns: 1fr; justify-items: center; }
  .roul-wheel-wrap { width: min(280px, 82vw); }
  .roul-info { width: 100%; }
  .roul-table { grid-template-columns: 36px 40px repeat(3, minmax(0, 1fr)); grid-template-rows: 44px repeat(12, 38px) 40px; padding: 8px; gap: 3px; }
  .rc { grid-row: var(--vr); grid-column: var(--vc); }
  .rc.out.half, .rc.out.dozen { font-size: 11px; }
  .rc.out.half .rc-l, .rc.out.dozen .rc-l { writing-mode: vertical-rl; transform: rotate(180deg); }
  .rc.half.red::before, .rc.half.black::before { width: 18px; height: 18px; }
  .rc-chip { min-width: 26px; height: 26px; }
  .rc.dozen .rc-chip, .rc.half .rc-chip { left: 50%; right: auto; top: auto; bottom: 3px; translate: -50% 0; min-width: 24px; height: 24px; font-size: 9px; }
}

/* краш: несколько ставок */
.slot-head { display:flex; align-items:center; justify-content:space-between; font-weight:800; font-size:13px; letter-spacing:.02em; color:var(--muted); margin-bottom:-2px; }
.slot-x { background:transparent !important; color:var(--muted); width:28px; height:28px; border-radius:8px; font-size:15px; line-height:1; padding:0; }
.slot-x:hover { background:#ffffff12 !important; color:#fff; }
.slot-add { background:transparent; border:2px dashed #ffffff26; border-radius:var(--radius); color:var(--muted); font-weight:800; min-height:60px; padding:14px; }
.slot-add:hover { border-color:#31e99a88; color:#31e99a; }
.crash-bets { grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }