/* ===== Hi-Lo (выше/ниже) — v1 ===== */
#hilo-root{
  --hl-card:#fdfbf5; --hl-ink:#1c2233; --hl-red:#e0323c; --hl-gold:#ffd23f;
  --hl-green:#37d67a; --hl-green2:#0f8a4a; --hl-lose:#ff4d4f; --hl-muted:rgba(255,255,255,.55);
  display:flex; flex-direction:column; gap:10px;
  padding:54px 12px 18px; box-sizing:border-box; min-height:100%;
}
#hilo-root .hidden{display:none!important}

/* --- баланс --- */
.hl-topbar{display:flex;justify-content:center}
.hl-bal{font-size:17px;font-weight:900;color:#fff;background:rgba(0,0,0,.28);border:1px solid rgba(255,255,255,.12);padding:6px 14px;border-radius:999px}
.hl-bal small{font-size:12px;opacity:.7;margin-left:2px}

/* --- стол --- */
.hl-table{
  position:relative; border-radius:22px; padding:14px 12px 12px; overflow:hidden;
  background:radial-gradient(120% 90% at 50% 0%,#1b6b45 0%,#0d4630 55%,#08301f 100%);
  box-shadow:inset 0 0 40px rgba(0,0,0,.45),0 8px 24px rgba(0,0,0,.35);
  border:1px solid rgba(255,255,255,.08);
}
.hl-shoe{position:absolute;top:12px;right:12px;width:34px;height:48px}
.hl-shoe i{position:absolute;inset:0;border-radius:6px;background:linear-gradient(145deg,#2a3f8f,#16205a);border:1px solid rgba(255,255,255,.22);box-shadow:0 2px 6px rgba(0,0,0,.35)}
.hl-shoe i:nth-child(2){transform:translate(2px,-2px)}
.hl-shoe i:nth-child(3){transform:translate(4px,-4px)}
.hl-shoe i:nth-child(4){transform:translate(6px,-6px)}
.hl-shoe.deal{animation:hlShoe .32s ease}

.hl-head{text-align:center;padding-right:44px}
.hl-mult{font-size:32px;line-height:1.1;font-weight:900;color:var(--hl-gold);text-shadow:0 2px 10px rgba(255,210,63,.35)}
.hl-mult.hot{color:#fff6c8;text-shadow:0 0 18px rgba(255,210,63,.85)}
.hl-pot{font-size:12px;font-weight:700;color:var(--hl-muted);margin-top:2px;min-height:15px}

.hl-stage{display:flex;align-items:center;justify-content:center;gap:16px;min-height:118px;margin:8px 0 6px}
.hl-slot{position:relative;width:74px;height:106px;border-radius:10px}
.hl-slot.next{border:1.5px dashed rgba(255,255,255,.16)}
.hl-slot.next:empty::after{content:"?";position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:26px;font-weight:900;color:rgba(255,255,255,.18)}

/* --- карты --- */
.hl-card{
  position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;
  background:var(--hl-card);color:var(--hl-ink);border-radius:10px;font-weight:900;
  box-shadow:0 6px 14px rgba(0,0,0,.4);
}
.hl-card.red{color:var(--hl-red)}
.hl-card .hl-r{font-size:27px;line-height:1}
.hl-card .hl-s{font-size:20px;line-height:1;margin-top:2px}
.hl-card.back{background:linear-gradient(145deg,#2a3f8f,#16205a);border:1px solid rgba(255,255,255,.22)}
.hl-card.dim{opacity:.42;filter:grayscale(.55)}

/* шлейф пройденных карт */
.hl-trail{display:flex;flex-wrap:wrap;gap:4px;justify-content:center;min-height:38px}
.hl-card.tiny{position:static;width:26px;height:37px;border-radius:5px;box-shadow:0 2px 6px rgba(0,0,0,.35)}
.hl-card.tiny .hl-r{font-size:12px}
.hl-card.tiny .hl-s{font-size:9px;margin-top:1px}
.hl-card.tiny.in{animation:hlIn .26s ease both}

/* --- переворот карты (главная механика) --- */
.hl-card.hl-flip{background:none;box-shadow:none;perspective:800px}
.hl-flip-inner{position:absolute;inset:0;transform-style:preserve-3d;animation:hlReveal .52s cubic-bezier(.2,.75,.25,1) both}
.hl-face{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;border-radius:10px;font-weight:900;backface-visibility:hidden;-webkit-backface-visibility:hidden;box-shadow:0 6px 14px rgba(0,0,0,.4)}
.hl-face-front{background:var(--hl-card);color:var(--hl-ink)}
.hl-face-front.red{color:var(--hl-red)}
.hl-face-back{background:linear-gradient(145deg,#2a3f8f,#16205a);border:1px solid rgba(255,255,255,.22);transform:rotateY(180deg)}
.hl-flip.good .hl-face-front{box-shadow:0 0 0 2px var(--hl-green),0 0 20px rgba(55,214,122,.6)}
.hl-flip.push .hl-face-front{box-shadow:0 0 0 2px var(--hl-gold),0 0 18px rgba(255,210,63,.5)}
.hl-flip.bad .hl-face-front{box-shadow:0 0 0 2px var(--hl-lose),0 0 20px rgba(255,77,79,.55)}
.hl-flip.bad{animation:hlShake .4s ease}

.hl-card.fly{animation:hlFly .48s cubic-bezier(.2,.8,.25,1) both}
.hl-card.slide{animation:hlSlide .3s ease both}
.hl-card.pop{animation:hlIn .26s ease both}

/* --- баннер и сообщения --- */
.hl-banner{
  position:absolute;left:50%;top:52%;transform:translate(-50%,-50%) scale(.9);opacity:0;pointer-events:none;
  padding:10px 18px;border-radius:14px;font-size:18px;font-weight:900;white-space:nowrap;
  background:rgba(0,0,0,.62);border:1px solid rgba(255,255,255,.16);color:#fff;transition:opacity .18s,transform .18s;
}
.hl-banner.show{opacity:1;transform:translate(-50%,-50%) scale(1)}
.hl-banner.win{color:#bafcd4;border-color:rgba(55,214,122,.55);box-shadow:0 0 26px rgba(55,214,122,.35)}
.hl-banner.lose{color:#ffc9c9;border-color:rgba(255,77,79,.55);box-shadow:0 0 26px rgba(255,77,79,.3)}
.hl-msg{min-height:16px;text-align:center;font-size:12.5px;font-weight:700;color:var(--hl-muted);opacity:0;transition:opacity .16s}
.hl-msg.show{opacity:1}
.hl-msg.lose{color:#ff9b9b}
.hl-msg.push{color:var(--hl-gold)}

/* --- панель управления --- */
.hl-panel{display:flex;flex-direction:column;gap:8px;padding:12px;border-radius:18px;background:rgba(0,0,0,.3);border:1px solid rgba(255,255,255,.08)}
.hl-betrow{display:flex;align-items:center;justify-content:center;gap:10px}
.hl-betrow button{width:38px;height:38px;border-radius:12px;border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.08);color:#fff;font-size:20px;font-weight:900}
.hl-betrow button:disabled{opacity:.4}
.hl-betfield{display:flex;align-items:center;gap:2px;background:rgba(0,0,0,.35);border:1px solid rgba(255,255,255,.12);border-radius:12px;padding:8px 12px}
.hl-betfield input{background:none;border:none;outline:none;color:#fff;font-size:17px;font-weight:900;text-align:right;min-width:3ch}
.hl-betfield span{color:var(--hl-muted);font-weight:900}

.hl-actions,.hl-row2{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.hl-btn{display:flex;flex-direction:column;align-items:center;gap:2px;padding:11px 8px;border:none;border-radius:14px;font-size:15px;font-weight:900;color:#06210f}
.hl-btn small{font-size:11px;font-weight:800;opacity:.8}
.hl-hi{background:linear-gradient(180deg,#4ce792,#12a45c)}
.hl-lo{background:linear-gradient(180deg,#ffb257,#ec6a28)}
.hl-btn:disabled,.hl-btn.noafford{filter:grayscale(.8);opacity:.45}
.hl-ghost{padding:11px 8px;border-radius:14px;border:1px solid rgba(255,255,255,.16);background:rgba(255,255,255,.06);color:#fff;font-size:13.5px;font-weight:800}
.hl-ghost:disabled{opacity:.4}
.hl-cash{padding:11px 8px;border:none;border-radius:14px;font-size:14.5px;font-weight:900;color:#2a1c00;background:linear-gradient(180deg,#ffe27a,#ffb400)}
.hl-cash:disabled{filter:grayscale(.8);opacity:.45}
.hl-cash.pulse{animation:hlPulse 1.15s ease-in-out infinite}
.hl-start{width:100%;padding:14px;border:none;border-radius:14px;font-size:16px;font-weight:900;color:#06210f;background:linear-gradient(180deg,#4ce792,#12a45c)}
.hl-start:disabled{opacity:.5}
.hl-start.noafford{filter:grayscale(.75);opacity:.55}

/* --- анимации --- */
@keyframes hlReveal{0%{transform:rotateY(180deg) scale(.96)}60%{transform:rotateY(28deg) scale(1.04)}100%{transform:rotateY(0) scale(1)}}
@keyframes hlFly{from{transform:translate(var(--fx,0px),var(--fy,0px)) rotate(-10deg) scale(.86);opacity:.9}to{transform:none;opacity:1}}
@keyframes hlSlide{from{transform:translateX(var(--sx,70px)) scale(.96)}to{transform:none}}
@keyframes hlIn{from{transform:scale(.7);opacity:0}to{transform:scale(1);opacity:1}}
@keyframes hlShake{0%,100%{transform:translateX(0)}20%{transform:translateX(-7px)}40%{transform:translateX(6px)}60%{transform:translateX(-4px)}80%{transform:translateX(3px)}}
@keyframes hlPulse{0%,100%{transform:scale(1);box-shadow:0 0 0 rgba(255,210,63,0)}50%{transform:scale(1.03);box-shadow:0 0 18px rgba(255,210,63,.5)}}
@keyframes hlShoe{0%{transform:translateY(0)}50%{transform:translateY(3px) scale(.97)}100%{transform:translateY(0)}}

@media (prefers-reduced-motion:reduce){
  .hl-flip-inner,.hl-card.fly,.hl-card.slide,.hl-card.pop,.hl-card.tiny.in,.hl-flip.bad,.hl-cash.pulse,.hl-shoe.deal{animation:none!important}
  .hl-flip-inner{transform:none!important}
  .hl-face-back{display:none}
}

/* ===== v2: цвет доллара, прогноз выигрыша, узор рубашки ===== */
#hilo-root .hl-cur{color:#4ce792;font-weight:900;margin-left:2px}
#hilo-root .hl-bal small{color:#4ce792;opacity:1}
#hilo-root .hl-betfield span.hl-cur{color:#4ce792}
#hilo-root .hl-cash .hl-cur{color:#0e6b39}
#hilo-root .hl-start .hl-cur{color:#05421f}
#hilo-root .hl-banner .hl-cur{color:#8ff0b6}
#hilo-root .hl-row2{grid-template-columns:1fr}

#hilo-root .hl-fore{display:flex;flex-direction:column;gap:6px;padding:8px 10px;border-radius:14px;background:rgba(0,0,0,.28);border:1px solid rgba(255,255,255,.07)}
#hilo-root .hl-fore-row{display:grid;grid-template-columns:70px 42px 1fr auto;align-items:center;gap:8px;font-size:12px;font-weight:800;color:#fff}
#hilo-root .hl-fore-lbl{white-space:nowrap}
#hilo-root .hl-fore-ch{color:var(--hl-muted);text-align:right;font-variant-numeric:tabular-nums}
#hilo-root .hl-fore-bar{position:relative;height:9px;border-radius:99px;background:rgba(255,255,255,.09);overflow:hidden}
#hilo-root .hl-fore-bar i{position:absolute;left:0;top:0;bottom:0;border-radius:99px;transition:width .35s cubic-bezier(.2,.8,.25,1)}
#hilo-root .hl-fore-row.hi .hl-fore-bar i{background:linear-gradient(90deg,#2fbd6f,#5cf3a0)}
#hilo-root .hl-fore-row.lo .hl-fore-bar i{background:linear-gradient(90deg,#e07a2a,#ffc06a)}
#hilo-root .hl-fore-val{white-space:nowrap;font-variant-numeric:tabular-nums}
#hilo-root .hl-fore-row.hi .hl-fore-val{color:#8ff0b6}
#hilo-root .hl-fore-row.lo .hl-fore-val{color:#ffcf9a}
#hilo-root .hl-fore-row.off{opacity:.35}
#hilo-root .hl-fore-row.off .hl-fore-val,#hilo-root .hl-fore-row.off .hl-fore-ch{color:var(--hl-muted)}

#hilo-root .hl-card.back,#hilo-root .hl-face-back{
  background:
    repeating-linear-gradient(45deg,rgba(255,255,255,.11) 0 2px,rgba(255,255,255,0) 2px 6px),
    repeating-linear-gradient(-45deg,rgba(255,255,255,.11) 0 2px,rgba(255,255,255,0) 2px 6px),
    radial-gradient(130% 120% at 28% 0%,#435cc9 0%,#25317f 48%,#131a4e 100%);
  border:1px solid rgba(255,255,255,.3);
  overflow:hidden;
}
#hilo-root .hl-card.back::before,#hilo-root .hl-face-back::before{content:"";position:absolute;inset:5px;border-radius:7px;border:1px solid rgba(255,255,255,.34);box-shadow:inset 0 0 14px rgba(0,0,0,.4)}
#hilo-root .hl-card.back::after,#hilo-root .hl-face-back::after{content:"";position:absolute;left:50%;top:50%;width:24px;height:24px;margin:-12px 0 0 -12px;border-radius:5px;transform:rotate(45deg);background:linear-gradient(135deg,#ffe08a,#dfa01e);box-shadow:0 0 12px rgba(255,210,63,.45),inset 0 0 0 1px rgba(255,255,255,.55)}
#hilo-root .hl-shoe i{background:
    repeating-linear-gradient(45deg,rgba(255,255,255,.12) 0 2px,rgba(255,255,255,0) 2px 5px),
    linear-gradient(145deg,#3a4fb5,#171f5c)}

/* ===== v3: кнопка "= Ровно" (шаг ×13) ===== */
#hilo-root .hl-eq{grid-column:1 / -1;background:linear-gradient(180deg,#8b5cf6,#5b21b6);box-shadow:0 6px 0 #3f1178,0 10px 20px rgba(139,92,246,.28)}
#hilo-root .hl-eq:active{box-shadow:0 3px 0 #3f1178,0 6px 12px rgba(139,92,246,.24)}
#hilo-root .hl-eq small{color:#ead9ff}
#hilo-root .hl-fore-row.eq .hl-fore-bar i{background:linear-gradient(90deg,#7c4dff,#c4a2ff)}
#hilo-root .hl-fore-row.eq .hl-fore-val{color:#d7c2ff}

/* ===== v4: один яркий множитель, баланс справа, узор колоды ===== */

/* табло шансов убрано */
#hilo-root .hl-fore{display:none!important}

/* кнопки: название мелко, множитель крупно и ярко */
#hilo-root .hl-btn{padding:9px 8px 10px}
#hilo-root .hl-btn b{font-size:13px;font-weight:800;opacity:.92;letter-spacing:.2px}
#hilo-root .hl-btn .hl-x{
  font-style:normal;font-size:22px;font-weight:900;line-height:1.05;
  color:#fff;text-shadow:0 2px 0 rgba(0,0,0,.35),0 0 14px rgba(255,255,255,.35);
}
#hilo-root .hl-eq .hl-x{color:#ffe9a8;text-shadow:0 2px 0 rgba(0,0,0,.4),0 0 16px rgba(255,210,63,.5)}

/* баланс — справа, ровно на уровне кнопки выхода (.game-back: top 9px, высота 38px) */
#hilo-root{padding-top:calc(58px + env(safe-area-inset-top))}
#hilo-root .hl-topbar{
  position:fixed;top:calc(9px + env(safe-area-inset-top));right:10px;left:auto;
  z-index:61;justify-content:flex-end;pointer-events:none;
}
#hilo-root .hl-bal{
  height:38px;box-sizing:border-box;display:flex;align-items:center;padding:0 14px;
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:rgba(11,12,15,.62);
}

/* колода рисуется тем же узором, что и рубашка карты */
#hilo-root .hl-shoe i{
  background:
    repeating-linear-gradient(45deg,rgba(255,255,255,.11) 0 2px,rgba(255,255,255,0) 2px 6px),
    repeating-linear-gradient(-45deg,rgba(255,255,255,.11) 0 2px,rgba(255,255,255,0) 2px 6px),
    radial-gradient(130% 120% at 28% 0%,#435cc9 0%,#25317f 48%,#131a4e 100%);
  border:1px solid rgba(255,255,255,.3);overflow:hidden;
}
#hilo-root .hl-shoe i::before{content:"";position:absolute;inset:3px;border-radius:4px;border:1px solid rgba(255,255,255,.3);box-shadow:inset 0 0 8px rgba(0,0,0,.4)}
#hilo-root .hl-shoe i::after{content:"";position:absolute;left:50%;top:50%;width:13px;height:13px;margin:-6.5px 0 0 -6.5px;border-radius:3px;transform:rotate(45deg);background:linear-gradient(135deg,#ffe08a,#dfa01e);box-shadow:0 0 7px rgba(255,210,63,.45),inset 0 0 0 1px rgba(255,255,255,.5)}

/* полёт из колоды — медленнее */
#hilo-root .hl-card.fly{animation-duration:.78s}
#hilo-root .hl-shoe.deal{animation-duration:.42s}

/* ===== v6: спокойный вылет, проценты на кнопках, монетка-доллар ===== */

/* вылет из колоды: без резкого рывка, меньше наклона и масштаба */
@keyframes hlFlyCalm{
  from{transform:translate(var(--fx,0px),var(--fy,0px)) rotate(-3.5deg) scale(.95);opacity:.55}
  60%{opacity:1}
  to{transform:none;opacity:1}
}
#hilo-root .hl-card.fly{animation:hlFlyCalm .64s cubic-bezier(.33,.9,.32,1) both}
#hilo-root .hl-shoe.deal{animation-duration:.34s}
/* переворот — исходная скорость */
#hilo-root .hl-flip-inner{transition:none}
#hilo-root .hl-card.hl-flip .hl-flip-inner{animation-duration:.52s}

/* процент события под множителем */
#hilo-root .hl-btn{padding:8px 8px 9px;gap:1px}
#hilo-root .hl-btn .hl-ch{
  font-size:11.5px;font-weight:800;letter-spacing:.3px;line-height:1;
  padding:2px 7px;border-radius:999px;
  background:rgba(0,0,0,.22);color:rgba(255,255,255,.92);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.18);
}
#hilo-root .hl-eq .hl-ch{background:rgba(0,0,0,.3);color:#ffe9a8}

/* красивый знак доллара на кнопке "Забрать" — золотая монетка */
#hilo-root .hl-cash .hl-cur{
  display:inline-grid;place-items:center;
  width:24px;height:24px;margin-left:6px;vertical-align:-6px;
  border-radius:50%;box-sizing:border-box;
  font-size:14px;font-weight:900;line-height:1;
  color:#6b4200;
  background:radial-gradient(120% 120% at 32% 24%,#fff8d4 0%,#ffdf7a 38%,#f0a80f 78%,#c07a00 100%);
  border:1.5px solid rgba(255,255,255,.85);
  box-shadow:0 2px 4px rgba(90,50,0,.45),inset 0 -1px 2px rgba(150,90,0,.5),inset 0 1px 2px rgba(255,255,255,.9);
  text-shadow:0 1px 0 rgba(255,255,255,.7);
}

@media (prefers-reduced-motion:reduce){
  #hilo-root .hl-card.fly{animation:none!important}
}