/* ===== Ананизм Casino — фирменная тема: тёмная слива, неон розовый/фиолетовый ===== */
:root {
  --bg: #0d0716;
  --bg2: #150b24;
  --panel: rgba(32, 18, 52, .72);
  --panel-solid: #1d1030;
  --panel2: #261640;
  --line: rgba(255, 255, 255, .08);
  --line2: rgba(255, 255, 255, .14);
  --text: #f6eefe;
  --muted: #a996c4;
  --dim: #6f5d8c;
  --pink: #ff2d87;
  --pink2: #ff6fb1;
  --violet: #8b5cf6;
  --violet2: #b794ff;
  --gold: #ffcf4a;
  --green: #2ee59d;
  --green-d: #13b97a;
  --red: #ff4d6d;
  --blue: #4cc9ff;
  --grad: linear-gradient(135deg, #ff2d87 0%, #b13cff 55%, #6d5cff 100%);
  --grad-win: linear-gradient(135deg, #2ee59d, #16c4b0);
  --r: 18px;
  --r-sm: 12px;
  --shadow: 0 10px 30px rgba(0, 0, 0, .45);
  --glow: 0 0 24px rgba(255, 45, 135, .45);
  --safe-b: env(safe-area-inset-bottom, 0px);
  --head: 'Unbounded', system-ui, sans-serif;
  --body: 'Manrope', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; }
body {
  background: var(--bg);
  color: var(--text);
  font: 600 15px/1.35 var(--body);
  overscroll-behavior: none;
  -webkit-font-smoothing: antialiased;
  user-select: none;
}
button, input, select { font: inherit; color: inherit; }
button { cursor: pointer; border: 0; background: none; padding: 0; }
a { color: inherit; text-decoration: none; }
b, strong { font-weight: 800; }
.num { font-variant-numeric: tabular-nums; }

/* фон: мягкие неоновые пятна + шум */
#bg { position: fixed; inset: 0; z-index: -1; overflow: hidden;
  background:
    radial-gradient(1200px 600px at 50% -10%, #2a1146 0%, transparent 60%),
    linear-gradient(180deg, #120920 0%, #0b0613 100%); }
#bg::after { content: ""; position: absolute; inset: 0; opacity: .07; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>"); }
.orb { position: absolute; border-radius: 50%; filter: blur(60px); opacity: .35; animation: float 18s ease-in-out infinite; }
.o1 { width: 340px; height: 340px; background: #ff2d87; top: -120px; left: -120px; }
.o2 { width: 300px; height: 300px; background: #7c3aed; top: 40%; right: -140px; animation-delay: -6s; }
.o3 { width: 260px; height: 260px; background: #2b59ff; bottom: -120px; left: 20%; opacity: .2; animation-delay: -12s; }
@keyframes float { 50% { transform: translate(30px, 40px) scale(1.1); } }

/* ===== шапка ===== */
#top { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; justify-content: space-between;
  padding: 10px 14px; background: rgba(13, 7, 22, .72); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line); }
.brand { display: flex; align-items: center; gap: 8px; }
.logo { font-size: 26px; filter: drop-shadow(0 0 10px rgba(255, 45, 135, .7)); }
.word { font: 900 17px/1 var(--head); letter-spacing: .5px; background: var(--grad); -webkit-background-clip: text;
  background-clip: text; color: transparent; display: flex; flex-direction: column; }
.word small { font: 600 9px/1.2 var(--body); letter-spacing: 4px; text-transform: uppercase; color: var(--muted);
  -webkit-text-fill-color: var(--muted); }
.balance { display: flex; align-items: center; gap: 6px; padding: 8px 14px; border-radius: 999px;
  background: linear-gradient(180deg, rgba(255, 255, 255, .08), rgba(255, 255, 255, .03)); border: 1px solid var(--line2);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08); font: 800 16px var(--body); transition: transform .15s; }
.balance:active { transform: scale(.96); }
.balance .star { filter: drop-shadow(0 0 6px rgba(255, 207, 74, .8)); }
.balance.up b { color: var(--green); }
.balance.down b { color: var(--red); }
.balance b { transition: color .4s; }

/* ===== контент и навигация ===== */
#view { padding: 14px 14px calc(92px + var(--safe-b)); max-width: 720px; margin: 0 auto; }
#nav { position: fixed; left: 0; right: 0; bottom: 0; z-index: 20; display: grid; grid-template-columns: repeat(5, 1fr);
  padding: 6px 6px calc(6px + var(--safe-b)); background: rgba(13, 7, 22, .86); backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px); border-top: 1px solid var(--line); }
#nav a { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 6px 0; border-radius: 12px;
  font: 700 10.5px var(--body); color: var(--dim); transition: color .2s, background .2s; }
#nav a span { font-size: 21px; filter: grayscale(.7) opacity(.7); transition: filter .2s, transform .2s; }
#nav a.on { color: var(--text); background: rgba(255, 45, 135, .1); }
#nav a.on span { filter: none; transform: translateY(-1px) scale(1.08); }

h1, h2, h3 { font-family: var(--head); margin: 0; letter-spacing: .2px; }
h1 { font-size: 22px; font-weight: 900; }
h2 { font-size: 16px; font-weight: 700; }
h3 { font-size: 14px; font-weight: 700; }
.muted { color: var(--muted); }
.dim { color: var(--dim); }
.green { color: var(--green); }
.red { color: var(--red); }
.gold { color: var(--gold); }
.pink { color: var(--pink2); }
.row { display: flex; align-items: center; gap: 10px; }
.between { justify-content: space-between; }
.col { display: flex; flex-direction: column; gap: 10px; }
.grow { flex: 1; }
.mt { margin-top: 14px; }
.mt2 { margin-top: 22px; }
.section-title { display: flex; align-items: center; justify-content: space-between; margin: 22px 2px 10px; }
.section-title h2 { display: flex; align-items: center; gap: 8px; }

.card { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r); padding: 14px;
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); box-shadow: var(--shadow); }
.card.flat { box-shadow: none; }
.pill { display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px; border-radius: 999px; font-size: 12px;
  font-weight: 800; background: rgba(255, 255, 255, .07); border: 1px solid var(--line); }
.pill.hot { background: rgba(255, 45, 135, .16); border-color: rgba(255, 45, 135, .4); color: var(--pink2); }
.pill.ok { background: rgba(46, 229, 157, .12); border-color: rgba(46, 229, 157, .35); color: var(--green); }
.pill.bad { background: rgba(255, 77, 109, .12); border-color: rgba(255, 77, 109, .35); color: var(--red); }

/* ===== кнопки ===== */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 50px; padding: 0 18px;
  border-radius: 14px; font: 800 16px var(--body); background: var(--panel2); border: 1px solid var(--line2);
  transition: transform .12s, filter .2s, opacity .2s; position: relative; overflow: hidden; }
.btn:active { transform: scale(.97); }
.btn:disabled { opacity: .45; pointer-events: none; }
.btn.primary { background: var(--grad); border: 0; box-shadow: var(--glow), inset 0 1px 0 rgba(255, 255, 255, .25);
  text-shadow: 0 1px 2px rgba(0, 0, 0, .3); }
.btn.win { background: var(--grad-win); border: 0; color: #04261a; box-shadow: 0 0 22px rgba(46, 229, 157, .4); }
.btn.ghost { background: rgba(255, 255, 255, .04); }
.btn.small { height: 36px; padding: 0 12px; font-size: 13px; border-radius: 10px; }
.btn.block { width: 100%; }
.btn.primary::after { content: ""; position: absolute; top: 0; left: -60%; width: 40%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .35), transparent); transform: skewX(-20deg);
  animation: shine 3.2s ease-in-out infinite; }
@keyframes shine { 0%, 70% { left: -60%; } 100% { left: 130%; } }

.seg { display: flex; padding: 4px; gap: 4px; border-radius: 12px; background: rgba(0, 0, 0, .3); border: 1px solid var(--line); }
.seg button { flex: 1; height: 34px; border-radius: 9px; font-weight: 800; font-size: 13px; color: var(--muted); transition: all .15s; }
.seg button.on { background: var(--panel2); color: var(--text); box-shadow: 0 2px 8px rgba(0, 0, 0, .35), inset 0 1px 0 rgba(255, 255, 255, .06); }

/* ===== поля ===== */
.field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.field > label { font-size: 12px; font-weight: 700; color: var(--muted); display: flex; justify-content: space-between; }
.input { display: flex; align-items: center; height: 46px; border-radius: 12px; background: rgba(0, 0, 0, .35);
  border: 1px solid var(--line2); padding: 0 6px 0 12px; gap: 6px; transition: border-color .2s; }
.input:focus-within { border-color: rgba(255, 45, 135, .6); box-shadow: 0 0 0 3px rgba(255, 45, 135, .12); }
.input input { flex: 1; min-width: 0; width: 100%; height: 100%; background: none; border: 0; outline: none; font-weight: 800; font-size: 16px; }
.input .unit { color: var(--muted); font-weight: 800; }
.input .mini { height: 32px; min-width: 40px; padding: 0 8px; border-radius: 8px; background: rgba(255, 255, 255, .07);
  font-weight: 800; font-size: 13px; color: var(--muted); }
.input .mini:active { background: rgba(255, 255, 255, .14); }
input[type=range] { width: 100%; }

/* ===== лобби ===== */
.hero { position: relative; overflow: hidden; border-radius: 22px; padding: 18px; min-height: 150px;
  background: radial-gradient(400px 200px at 90% 10%, rgba(255, 207, 74, .25), transparent 60%),
              linear-gradient(135deg, #3a0f4f 0%, #1b0c33 50%, #0f1440 100%);
  border: 1px solid rgba(255, 255, 255, .1); box-shadow: var(--shadow); }
.hero h1 { font-size: 24px; line-height: 1.1; }
.hero h1 em { font-style: normal; background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hero p { margin: 8px 0 0; color: var(--muted); font-size: 13px; max-width: 70%; }
.hero .big { position: absolute; right: -6px; bottom: -14px; font-size: 96px; transform: rotate(-12deg);
  filter: drop-shadow(0 10px 25px rgba(255, 45, 135, .6)); animation: bob 4s ease-in-out infinite; }
@keyframes bob { 50% { transform: rotate(-6deg) translateY(-8px); } }
.hero .stats { display: flex; gap: 8px; margin-top: 14px; flex-wrap: wrap; }

.quick { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 14px; }
.quick a { position: relative; padding: 12px 10px; border-radius: 16px; background: var(--panel); border: 1px solid var(--line);
  display: flex; flex-direction: column; gap: 4px; min-height: 84px; overflow: hidden; }
.quick a .ico { font-size: 24px; }
.quick a b { font-size: 13px; }
.quick a small { font-size: 11px; color: var(--muted); font-weight: 700; }
.quick a.ready { border-color: rgba(46, 229, 157, .45); box-shadow: 0 0 18px rgba(46, 229, 157, .15); }
.quick a.ready small { color: var(--green); }
.quick a.ready::after { content: ""; position: absolute; top: 9px; right: 9px; width: 8px; height: 8px; border-radius: 50%;
  background: var(--green); box-shadow: 0 0 10px var(--green); animation: pulse 1.6s infinite; }
@keyframes pulse { 50% { opacity: .35; transform: scale(.8); } }

.games { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.tile { position: relative; aspect-ratio: 3 / 4; border-radius: 18px; overflow: hidden; display: flex; flex-direction: column;
  justify-content: flex-end; padding: 10px; border: 1px solid rgba(255, 255, 255, .12); box-shadow: var(--shadow);
  transition: transform .15s; isolation: isolate; }
.tile:active { transform: scale(.96); }
.tile::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--tg, var(--grad)); }
.tile::after { content: ""; position: absolute; inset: 0; z-index: -1;
  background: radial-gradient(120% 70% at 50% 0%, rgba(255, 255, 255, .25), transparent 55%),
              linear-gradient(180deg, transparent 45%, rgba(0, 0, 0, .55)); }
.tile .ti { position: absolute; top: 14%; left: 50%; transform: translateX(-50%); font-size: 46px;
  filter: drop-shadow(0 8px 14px rgba(0, 0, 0, .45)); transition: transform .3s; }
.tile:hover .ti { transform: translateX(-50%) scale(1.08) rotate(-4deg); }
.tile b { font: 900 clamp(10px, 3.1vw, 13px)/1.1 var(--head); text-transform: uppercase; letter-spacing: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-shadow: 0 2px 6px rgba(0, 0, 0, .5); }
.tile small { font-size: 10px; font-weight: 800; color: rgba(255, 255, 255, .75); }
.tile .tag { position: absolute; top: 8px; right: 8px; font: 800 9px var(--body); padding: 3px 6px; border-radius: 6px;
  background: rgba(0, 0, 0, .45); letter-spacing: .5px; }

/* лента ставок */
.feed { display: flex; flex-direction: column; }
.feed .it { display: grid; grid-template-columns: 28px 1fr auto auto; gap: 10px; align-items: center; padding: 9px 4px;
  border-bottom: 1px solid var(--line); font-size: 13px; animation: slideIn .35s ease; }
.feed .it:last-child { border-bottom: 0; }
.feed .it .g { font-size: 18px; text-align: center; }
.feed .it .who { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.feed .it .who small { display: block; color: var(--dim); font-size: 11px; }
.feed .it .m { font-weight: 800; color: var(--muted); min-width: 52px; text-align: right; }
.feed .it .p { font-weight: 800; min-width: 64px; text-align: right; }
@keyframes slideIn { from { opacity: 0; transform: translateY(-6px); } }

/* ===== экран игры ===== */
.game-head { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.game-head .back { width: 38px; height: 38px; border-radius: 12px; background: var(--panel); border: 1px solid var(--line);
  display: grid; place-items: center; font-size: 18px; }
.game-head h1 { font-size: 18px; }
.game-head .tag { margin-left: auto; }
.stage { position: relative; border-radius: 22px; overflow: hidden; background:
  radial-gradient(500px 260px at 50% 0%, rgba(139, 92, 246, .22), transparent 70%), #120a20;
  border: 1px solid var(--line2); box-shadow: inset 0 0 60px rgba(0, 0, 0, .5), var(--shadow); min-height: 260px; }
.controls { margin-top: 12px; display: flex; flex-direction: column; gap: 12px; }
.controls .grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.history { display: flex; gap: 6px; overflow-x: auto; padding: 10px 12px; scrollbar-width: none; }
.history::-webkit-scrollbar { display: none; }
.history span { flex: none; padding: 4px 9px; border-radius: 8px; font-weight: 800; font-size: 12px;
  background: rgba(255, 255, 255, .06); color: var(--muted); animation: pop .3s; }
.history span.w { background: rgba(46, 229, 157, .14); color: var(--green); }
@keyframes pop { from { transform: scale(.6); opacity: 0; } }

/* всплывающий результат */
.result { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%) scale(.6); opacity: 0; pointer-events: none;
  padding: 14px 22px; border-radius: 18px; text-align: center; background: rgba(13, 7, 22, .9); border: 2px solid var(--green);
  box-shadow: 0 0 40px rgba(46, 229, 157, .35); transition: all .25s cubic-bezier(.2, 1.4, .4, 1); z-index: 5; }
.result.show { transform: translate(-50%, -50%) scale(1); opacity: 1; }
.result .x { font: 900 30px var(--head); color: var(--green); }
.result .p { font-weight: 800; margin-top: 2px; }
.result.lose { border-color: var(--red); box-shadow: 0 0 40px rgba(255, 77, 109, .3); }
.result.lose .x { color: var(--red); }

.fairline { display: flex; gap: 8px; align-items: center; justify-content: center; margin-top: 10px; font-size: 11px; color: var(--dim); }
.fairline code { font-family: ui-monospace, Menlo, monospace; color: var(--muted); }

/* ===== Dice ===== */
.dice-wrap { padding: 54px 18px 34px; }
.dice-track { position: relative; height: 14px; border-radius: 999px; background: var(--red); margin: 0 6px; box-shadow: inset 0 2px 4px rgba(0, 0, 0, .4); }
.dice-track .win { position: absolute; top: 0; bottom: 0; border-radius: 999px; background: var(--green); transition: all .2s; }
.dice-track input { position: absolute; inset: -14px -10px; width: calc(100% + 20px); opacity: 0; cursor: pointer; }
.dice-thumb { position: absolute; top: 50%; width: 30px; height: 30px; border-radius: 9px; transform: translate(-50%, -50%);
  background: linear-gradient(180deg, #fff, #d9cdea); box-shadow: 0 4px 12px rgba(0, 0, 0, .5); pointer-events: none;
  display: grid; place-items: center; transition: left .2s; }
.dice-thumb::after { content: "|||"; font-size: 10px; letter-spacing: -1px; color: #7b6a97; font-weight: 900; }
.dice-marker { position: absolute; bottom: 26px; transform: translateX(-50%); transition: left .55s cubic-bezier(.2, .9, .3, 1.1);
  display: flex; flex-direction: column; align-items: center; pointer-events: none; }
.dice-marker .hex { width: 58px; height: 54px; display: grid; place-items: center; font: 900 15px var(--head); color: #120a20;
  clip-path: polygon(25% 0, 75% 0, 100% 50%, 75% 100%, 25% 100%, 0 50%); background: #fff; }
.dice-marker.w .hex { background: var(--green); }
.dice-marker.l .hex { background: var(--red); color: #fff; }
.dice-scale { display: flex; justify-content: space-between; margin: 12px 0 0; font-size: 11px; color: var(--dim); font-weight: 800; }

/* ===== Limbo / Crash ===== */
.bigx { font: 900 64px/1 var(--head); text-align: center; letter-spacing: -1px; transition: color .2s; text-shadow: 0 0 40px rgba(255, 255, 255, .15); }
.bigx.w { color: var(--green); text-shadow: 0 0 40px rgba(46, 229, 157, .45); }
.bigx.l { color: var(--red); text-shadow: 0 0 40px rgba(255, 77, 109, .45); }
.limbo-stage { display: grid; place-items: center; min-height: 260px; }
.limbo-stage .sub { text-align: center; color: var(--muted); font-weight: 800; margin-top: 10px; }
canvas.full { display: block; width: 100%; height: 280px; }
.crash-x { position: absolute; left: 0; right: 0; top: 30%; text-align: center; pointer-events: none; }
.crash-x .bigx { font-size: 56px; }
.crash-x .sub { color: var(--muted); font-weight: 800; margin-top: 6px; }

/* ===== Plinko ===== */
.plinko-stage canvas { display: block; width: 100%; }
.buckets { display: flex; gap: 3px; padding: 0 10px 12px; }
.buckets span { flex: 1; text-align: center; font: 800 9.5px var(--body); padding: 6px 0; border-radius: 6px; color: #160a26;
  transition: transform .15s; }
.buckets span.hit { animation: bucket .4s; }
@keyframes bucket { 40% { transform: translateY(5px); filter: brightness(1.5); } }

/* ===== Mines ===== */
.mines-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; padding: 14px; }
.cell { aspect-ratio: 1; border-radius: 12px; background: linear-gradient(180deg, #34205a, #24143f);
  border: 1px solid rgba(255, 255, 255, .1); box-shadow: 0 5px 0 #150b26, inset 0 1px 0 rgba(255, 255, 255, .1);
  display: grid; place-items: center; font-size: 28px; transition: transform .12s, background .2s; position: relative; }
.cell:active { transform: translateY(3px); box-shadow: 0 2px 0 #150b26; }
.cell.open { background: #0e0819; box-shadow: inset 0 0 18px rgba(0, 0, 0, .7); transform: none; animation: flip .35s; }
.cell.gem { box-shadow: inset 0 0 22px rgba(46, 229, 157, .35); }
.cell.bomb { background: radial-gradient(circle, rgba(255, 77, 109, .5), #2a0b17 70%); animation: boom .45s; }
.cell.ghost { opacity: .4; }
.cell.dis { pointer-events: none; }
@keyframes flip { from { transform: rotateY(90deg) scale(.8); } }
@keyframes boom { 30% { transform: scale(1.25); } 60% { transform: scale(.92); } }

/* ===== карты (HiLo, BJ) ===== */
.cardx { width: 74px; height: 104px; border-radius: 10px; background: linear-gradient(180deg, #fff, #f1ebf8); color: #1a1026;
  display: flex; flex-direction: column; justify-content: space-between; padding: 6px 8px; box-shadow: 0 8px 20px rgba(0, 0, 0, .5);
  font: 900 20px/1 var(--head); position: relative; animation: deal .35s cubic-bezier(.2, .9, .3, 1.2); flex: none; }
.cardx.red { color: #e0234e; }
.cardx .s { font-size: 30px; align-self: center; }
.cardx .br { transform: rotate(180deg); }
.cardx.back { background: repeating-linear-gradient(45deg, #ff2d87 0 8px, #b13cff 8px 16px); border: 4px solid #fff; }
.cardx.back * { visibility: hidden; }
.cardx.sm { width: 46px; height: 64px; font-size: 13px; padding: 4px 5px; border-radius: 7px; }
.cardx.sm .s { font-size: 18px; }
@keyframes deal { from { transform: translateY(-30px) rotate(-8deg); opacity: 0; } }
.hilo-stage { padding: 20px 12px; display: flex; flex-direction: column; align-items: center; gap: 14px; }
.hilo-trail { display: flex; gap: 6px; overflow-x: auto; width: 100%; padding: 4px 2px; scrollbar-width: none; }
.hilo-trail::-webkit-scrollbar { display: none; }
.hilo-big .cardx { width: 110px; height: 154px; font-size: 30px; padding: 10px 12px; }
.hilo-big .cardx .s { font-size: 52px; }
.bj-stage { padding: 16px 12px; display: flex; flex-direction: column; gap: 18px; min-height: 320px; }
.bj-row { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.bj-cards { display: flex; justify-content: center; }
.bj-cards .cardx { margin-left: -26px; }
.bj-cards .cardx:first-child { margin-left: 0; }
.bj-hands { display: flex; justify-content: center; gap: 20px; flex-wrap: wrap; }
.bj-hand { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 8px; border-radius: 14px; border: 1px solid transparent; }
.bj-hand.cur { border-color: rgba(255, 45, 135, .5); background: rgba(255, 45, 135, .06); }
.badge { padding: 3px 10px; border-radius: 999px; background: rgba(0, 0, 0, .5); font-weight: 900; font-size: 13px; border: 1px solid var(--line2); }
.badge.w { color: var(--green); border-color: rgba(46, 229, 157, .4); }
.badge.l { color: var(--red); border-color: rgba(255, 77, 109, .4); }
.hint { outline: 2px solid var(--gold); box-shadow: 0 0 18px rgba(255, 207, 74, .45) !important; }

/* ===== Keno ===== */
.keno-grid { display: grid; grid-template-columns: repeat(8, 1fr); gap: 6px; padding: 12px; }
.kn { aspect-ratio: 1; border-radius: 10px; background: linear-gradient(180deg, #2c1a4b, #21133a); border: 1px solid rgba(255, 255, 255, .08);
  font-weight: 900; font-size: 14px; display: grid; place-items: center; transition: all .15s; box-shadow: 0 3px 0 #140a24; }
.kn.pick { background: var(--grad); box-shadow: 0 3px 0 #6b1340, var(--glow); }
.kn.drawn { background: #0d0717; color: var(--dim); box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .15); animation: pop .3s; }
.kn.hit { background: var(--grad-win); color: #04261a; box-shadow: 0 0 18px rgba(46, 229, 157, .6); animation: pop .3s; }
.paytable { display: flex; gap: 4px; overflow-x: auto; padding: 0 12px 12px; scrollbar-width: none; }
.paytable div { flex: 1; min-width: 46px; text-align: center; padding: 6px 2px; border-radius: 8px; background: rgba(255, 255, 255, .05);
  font-size: 11px; font-weight: 800; }
.paytable div small { display: block; color: var(--dim); font-size: 10px; }
.paytable div.on { background: rgba(46, 229, 157, .18); color: var(--green); }

/* ===== Wheel / Roulette ===== */
.wheel-stage { display: grid; place-items: center; padding: 16px 0; position: relative; }
.wheel-stage canvas { width: 290px; height: 290px; }
.pointer { position: absolute; top: 8px; left: 50%; transform: translateX(-50%); width: 0; height: 0; border-left: 14px solid transparent;
  border-right: 14px solid transparent; border-top: 26px solid #fff; filter: drop-shadow(0 4px 8px rgba(0, 0, 0, .6)); z-index: 2; }
.legend { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; padding: 0 10px 14px; }
.legend span { padding: 4px 10px; border-radius: 8px; font-size: 12px; font-weight: 800; color: #120a20; }
.rt-table { display: grid; grid-template-columns: 34px repeat(12, 1fr); gap: 3px; padding: 10px; font-size: 11px; }
.rt-n { aspect-ratio: .78; border-radius: 6px; display: grid; place-items: center; font-weight: 900; position: relative; color: #fff; }
.rt-n.r { background: #d61f45; }
.rt-n.b { background: #22172f; border: 1px solid rgba(255, 255, 255, .1); }
.rt-n.z { background: #138a56; grid-row: span 3; aspect-ratio: auto; }
.rt-out { display: grid; grid-template-columns: repeat(6, 1fr); gap: 3px; padding: 0 10px 10px; }
.rt-out button, .rt-doz button { height: 34px; border-radius: 8px; background: rgba(255, 255, 255, .06); font-weight: 800; font-size: 12px; position: relative; }
.rt-doz { display: grid; grid-template-columns: repeat(3, 1fr) ; gap: 3px; padding: 0 10px 4px 47px; }
.chip { position: absolute; top: -6px; right: -6px; min-width: 22px; height: 22px; padding: 0 4px; border-radius: 999px;
  background: var(--gold); color: #3a2400; font: 900 10px/22px var(--body); text-align: center; box-shadow: 0 2px 6px rgba(0, 0, 0, .5);
  border: 2px dashed #fff8; z-index: 2; }
.rt-ball { font: 900 46px var(--head); text-align: center; padding: 18px 0 4px; }

/* ===== Ферма ===== */
.farm-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.farm-card { position: relative; overflow: hidden; border-radius: 20px; padding: 14px; min-height: 140px;
  display: flex; flex-direction: column; justify-content: space-between; border: 1px solid var(--line2); box-shadow: var(--shadow); }
.farm-card .ico { font-size: 34px; }
.farm-card .t { font: 800 15px var(--head); }
.farm-card .s { font-size: 12px; color: rgba(255, 255, 255, .75); font-weight: 700; }
.farm-card.work { background: linear-gradient(140deg, #ff7a18, #af002d 80%); }
.farm-card.bonus { background: linear-gradient(140deg, #b13cff, #3f1dcb 80%); }
.farm-card.dole { background: linear-gradient(140deg, #2b5876, #4e4376); }
.farm-card .btn { height: 38px; font-size: 13px; margin-top: 8px; background: rgba(0, 0, 0, .3); border-color: rgba(255, 255, 255, .25); }
.pond { position: relative; height: 230px; overflow: hidden; border-radius: 22px;
  background: linear-gradient(180deg, #7dd3fc 0%, #38bdf8 30%, #0e7490 60%, #083344 100%); border: 1px solid var(--line2); }
.pond.river { background: linear-gradient(180deg, #a7f3d0 0%, #34d399 25%, #047857 60%, #022c22 100%); }
.pond.sea { background: linear-gradient(180deg, #fdba74 0%, #f472b6 22%, #1d4ed8 55%, #0b1b4d 100%); }
.pond.abyss { background: linear-gradient(180deg, #312e81 0%, #1e1b4b 30%, #0b0620 70%, #000 100%); }
.pond .wave { position: absolute; left: -50%; width: 200%; height: 60px; top: 38%; opacity: .35;
  background: radial-gradient(40px 14px at 50% 0, rgba(255, 255, 255, .8), transparent 70%) 0 0 / 80px 30px repeat-x;
  animation: wave 6s linear infinite; }
.pond .wave.w2 { top: 46%; opacity: .2; animation-duration: 9s; animation-direction: reverse; }
@keyframes wave { to { transform: translateX(80px); } }
.bobber { position: absolute; left: 50%; top: 40%; transform: translate(-50%, -50%); font-size: 34px; transition: top .3s; }
.bobber.idle { display: none; }
.bobber.wait { animation: bobble 1.6s ease-in-out infinite; }
.bobber.bite { animation: bite .25s ease-in-out infinite; }
@keyframes bobble { 50% { transform: translate(-50%, -38%); } }
@keyframes bite { 50% { transform: translate(-50%, -10%) rotate(14deg); } }
.pond .msg { position: absolute; left: 0; right: 0; bottom: 16px; text-align: center; font: 900 20px var(--head); text-shadow: 0 3px 12px rgba(0, 0, 0, .6); }
.catch { text-align: center; padding: 18px; }
.catch .fish { font-size: 64px; animation: pop .4s; filter: drop-shadow(0 10px 20px rgba(0, 0, 0, .5)); }
.tier-junk { color: #9ca3af; } .tier-common { color: #e5e7eb; } .tier-rare { color: #60a5fa; }
.tier-epic { color: #c084fc; } .tier-legendary { color: var(--gold); } .tier-mythic { color: var(--red); }
.aq { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; }
.aq div { aspect-ratio: 1; border-radius: 12px; background: rgba(0, 0, 0, .3); display: grid; place-items: center; font-size: 24px;
  border: 1px solid var(--line); position: relative; }
.aq div small { position: absolute; bottom: 2px; right: 4px; font-size: 9px; font-weight: 800; color: var(--muted); }
.aq div.unknown { font-size: 16px; color: var(--dim); }

/* ===== журнал и топ ===== */
.list .li { display: flex; align-items: center; gap: 10px; padding: 11px 2px; border-bottom: 1px solid var(--line); }
.list .li:last-child { border-bottom: 0; }
.list .li .grow small { display: block; color: var(--dim); font-size: 11px; font-weight: 700; margin-top: 2px; }
.list .li .amt { font-weight: 900; text-align: right; }
.list .li .amt small { display: block; color: var(--dim); font-size: 11px; font-weight: 700; }
.avatar { width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; font: 900 15px var(--head);
  background: var(--grad); flex: none; color: #fff; text-shadow: 0 1px 2px rgba(0, 0, 0, .4); }
.podium { display: grid; grid-template-columns: 1fr 1.15fr 1fr; gap: 8px; align-items: end; margin-top: 6px; }
.podium .p { text-align: center; padding: 14px 6px 12px; border-radius: 18px 18px 12px 12px; background: var(--panel); border: 1px solid var(--line2); position: relative; }
.podium .p .avatar { margin: 0 auto 8px; width: 48px; height: 48px; font-size: 18px; }
.podium .p.first { padding-top: 22px; background: linear-gradient(180deg, rgba(255, 207, 74, .2), var(--panel)); border-color: rgba(255, 207, 74, .45); }
.podium .p .medal { font-size: 26px; position: absolute; top: -16px; left: 50%; transform: translateX(-50%); }
.podium .p b { display: block; font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.podium .p .pts { font: 900 15px var(--head); margin-top: 4px; }
.me-row { border: 1px solid rgba(255, 45, 135, .45) !important; background: rgba(255, 45, 135, .08); border-radius: 12px; padding-left: 8px !important; }
.mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; word-break: break-all; color: var(--muted); }

/* ===== прочее ===== */
#toasts { position: fixed; top: 64px; left: 50%; transform: translateX(-50%); z-index: 50; display: flex; flex-direction: column; gap: 8px; width: min(92vw, 420px); pointer-events: none; }
.toast { padding: 12px 16px; border-radius: 14px; background: rgba(29, 16, 48, .96); border: 1px solid var(--line2); box-shadow: var(--shadow);
  font-weight: 700; animation: toast .3s ease; backdrop-filter: blur(10px); }
.toast.err { border-color: rgba(255, 77, 109, .5); }
.toast.ok { border-color: rgba(46, 229, 157, .5); }
@keyframes toast { from { transform: translateY(-10px); opacity: 0; } }
.modal-back { position: fixed; inset: 0; z-index: 40; background: rgba(5, 2, 10, .7); backdrop-filter: blur(6px); display: flex; align-items: flex-end; animation: fade .2s; }
.modal { width: 100%; max-height: 86vh; overflow: auto; background: var(--panel-solid); border-radius: 24px 24px 0 0; padding: 18px 16px calc(20px + var(--safe-b));
  border-top: 1px solid var(--line2); animation: up .3s cubic-bezier(.2, .9, .3, 1); }
@keyframes fade { from { opacity: 0; } }
@keyframes up { from { transform: translateY(40%); } }
.skeleton { height: 60px; border-radius: 14px; background: linear-gradient(90deg, rgba(255,255,255,.04), rgba(255,255,255,.09), rgba(255,255,255,.04)); background-size: 200% 100%; animation: sk 1.2s infinite; }
@keyframes sk { to { background-position: -200% 0; } }
.empty { text-align: center; padding: 26px 10px; color: var(--muted); }
.confetti { position: fixed; top: -10px; width: 9px; height: 14px; z-index: 60; pointer-events: none; animation: fall linear forwards; }
@keyframes fall { to { transform: translateY(110vh) rotate(720deg); } }
@media (min-width: 560px) { .games { grid-template-columns: repeat(4, 1fr); } }
input[type=number]::-webkit-inner-spin-button, input[type=number]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
input[type=number] { -moz-appearance: textfield; }
/* картинки от художника (web/img) — если файла нет, остаётся эмодзи */
.tile-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -1; }
.tile.has-img .ti { display: none; }

/* ===== графика от Кодекса (web/img) ===== */
.logo-img { width: 38px; height: 38px; filter: drop-shadow(0 0 10px rgba(255, 45, 135, .6)); }
.star-img { width: 20px; height: 20px; filter: drop-shadow(0 0 6px rgba(255, 207, 74, .7)); }
#bg::before { content: ""; position: absolute; inset: 0; background: url(/static/img/bg-tile.webp) repeat; background-size: 256px; opacity: .18; }
.hero.art { background: linear-gradient(90deg, rgba(18, 7, 34, .96) 0%, rgba(18, 7, 34, .75) 45%, rgba(18, 7, 34, 0) 75%),
  url(/static/img/hero.webp) right center / cover no-repeat; min-height: 170px; }
.hero.art .big { display: none; }
.cell { background: url(/static/img/mines/tile.png) center / 112% no-repeat, linear-gradient(180deg, #34205a, #24143f); }
.cell.open { background: #0e0819; }
.cell { min-width: 0; overflow: hidden; }
.cell img { position: absolute; inset: 11%; width: 78%; height: 78%; object-fit: contain; filter: drop-shadow(0 4px 8px rgba(0,0,0,.5)); animation: pop .3s; }
.cell.ghost img { filter: grayscale(.4) brightness(.8); }
.cardx.back { background: url(/static/img/cards/back.png) center / cover; border: 3px solid #fff; }
.farm-card .ico img { width: 64px; height: 64px; object-fit: contain; margin: -8px 0 -6px -4px; filter: drop-shadow(0 6px 12px rgba(0,0,0,.45)); }
.pond { background-size: cover !important; background-position: center !important; }
.pond { background: url(/static/img/fish/pond.webp); }
.pond.river { background: url(/static/img/fish/river.webp); }
.pond.sea { background: url(/static/img/fish/sea.webp); }
.pond.abyss { background: url(/static/img/fish/abyss.webp); }
.pond .wave { display: none; }
.pond .msg { background: linear-gradient(180deg, transparent, rgba(0,0,0,.45)); padding: 10px 0 4px; bottom: 0; }

/* ===== графика внутри игр (партия 2) ===== */
.stage.scene-mines { background: linear-gradient(180deg, rgba(13,7,22,.25), rgba(13,7,22,.55)), url(/static/img/g/mines/scene.webp) center / cover; }
.cell { background: url(/static/img/g/mines/tile.png) center / 108% no-repeat, linear-gradient(180deg, #34205a, #24143f); }
.cell.open { background: url(/static/img/g/mines/tile_open.png) center / 108% no-repeat, #0e0819; }
.cell.bomb { background: url(/static/img/g/mines/tile_open.png) center / 108% no-repeat, radial-gradient(circle, rgba(255, 77, 109, .5), #2a0b17 70%); }
.cell .boomfx { position: absolute; inset: -40%; width: 180%; height: 180%; pointer-events: none; z-index: 3; }
.stage.scene-crash { background: url(/static/img/g/crash/scene.webp) center / cover; }
.stage.scene-limbo { background: linear-gradient(180deg, rgba(13,7,22,.1), rgba(13,7,22,.5)), url(/static/img/g/limbo/scene.webp) center / cover; }
.limbo-rocket { position: relative; width: 90px; height: 120px; margin: 0 auto; transition: transform .6s cubic-bezier(.3,.7,.3,1); }
.limbo-rocket img.r { position: absolute; left: 50%; top: 0; width: 90px; transform: translateX(-50%); z-index: 2; }
.limbo-rocket img.f { position: absolute; left: 50%; top: 66px; width: 46px; transform: translateX(-50%); z-index: 1; }
.limbo-stars { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; opacity: 0; transition: opacity .3s; pointer-events: none; }
.stage.scene-dice { background: linear-gradient(180deg, rgba(13,7,22,.2), rgba(13,7,22,.55)), url(/static/img/g/dice/scene.webp) center / cover; }
.dice-thumb { background: url(/static/img/g/dice/slider_thumb.png) center / contain no-repeat !important; box-shadow: none !important; width: 44px; height: 44px; }
.dice-thumb::after { content: none; }
.dice-marker .hex { background: url(/static/img/g/dice/marker_win.png) center / contain no-repeat !important; clip-path: none; width: 70px; height: 70px; color: #fff; text-shadow: 0 1px 4px #000; }
.dice-marker:not(.w):not(.l) .hex { filter: grayscale(.6) brightness(1.2); }
.dice-marker.l .hex { background-image: url(/static/img/g/dice/marker_lose.png) !important; }

/* ===== графика: карты, keno, wheel, рулетка ===== */
.cardx { background: url(/static/img/g/cards/face_frame.png) center / 100% 100% no-repeat, linear-gradient(180deg, #fff, #f1ebf8); }
.cardx.back { background: url(/static/img/g/cards/back.png) center / cover !important; border: 0 !important; }
.cardx .pic { position: absolute; left: 14%; right: 14%; top: 22%; bottom: 22%; background: center / contain no-repeat; }
.cardx.face .s { visibility: hidden; }
.stage.cards-table, .hilo-stage, .bj-stage { background: linear-gradient(180deg, rgba(13,7,22,.15), rgba(13,7,22,.55)), url(/static/img/g/cards/table.webp) center / cover !important; }
.kn { background: url(/static/img/g/keno/cell.png) center / 100% 100% no-repeat !important; box-shadow: none !important; border: 0 !important; color: #fff; text-shadow: 0 1px 3px #000; }
.kn.pick { background-image: url(/static/img/g/keno/cell_pick.png) !important; }
.kn.hit { background-image: url(/static/img/g/keno/cell_hit.png) !important; color: #04261a; text-shadow: none; }
.kn.drawn { opacity: .55; }
.stage.scene-keno { background: linear-gradient(180deg, rgba(13,7,22,.25), rgba(13,7,22,.6)), url(/static/img/g/keno/scene.webp) center / cover; }
.stage.scene-wheel { background: linear-gradient(180deg, rgba(13,7,22,.15), rgba(13,7,22,.55)), url(/static/img/g/wheel/scene.webp) center / cover; }
.wheel-stage .rim { position: absolute; left: 50%; top: 50%; width: 330px; height: 330px; transform: translate(-50%, -50%); pointer-events: none; z-index: 1; }
.wheel-stage .hub { position: absolute; left: 50%; top: 50%; width: 92px; height: 92px; transform: translate(-50%, -50%); pointer-events: none; z-index: 2; }
.wheel-stage .pointer.art { border: 0; width: 44px; height: 58px; top: -2px; background: url(/static/img/g/wheel/pointer.png) center / contain no-repeat; z-index: 3; }
.stage.scene-roulette { background: linear-gradient(180deg, rgba(13,7,22,.2), rgba(13,7,22,.5)), url(/static/img/g/roulette/felt.webp) center / cover; }
.mute-btn { margin-left: auto; margin-right: 8px; width: 38px; height: 38px; border-radius: 50%; border: 1px solid rgba(255,255,255,.14); background: rgba(255,255,255,.06);
  font-size: 17px; display: grid; place-items: center; padding: 0; color: #fff; }
.mute-btn.off { opacity: .6; }