/* ===== Wheel v7 ===== */
:root{
  --wh-bg:#101218;
  --wh-panel:#1b1f29;
  --wh-line:#2c323f;
  --wh-muted:#9aa3b4;
  --wh-red:#ff3b57;
  --wh-green:#2bd155;
  --wh-gold:#ffc61a;
  --wh-blackc:#4a5265;
}

.screen-wheel{
  padding:0!important;
  height:100dvh;max-height:100dvh;min-height:0!important;
  overflow:hidden;overscroll-behavior:none;touch-action:manipulation;
  background:var(--wh-bg);
}
#wheel-root{height:100%;width:100%}

.wh-wrap{
  position:relative;
  display:flex;flex-direction:column;
  height:100%;box-sizing:border-box;overflow:hidden;
  padding:calc(env(safe-area-inset-top,0px) + 8px) 12px calc(env(safe-area-inset-bottom,0px) + 12px);
  gap:7px;
  color:#fff;
  font-family:"Manrope",system-ui,sans-serif;
}
.wh-wrap *,.wh-wrap *::before,.wh-wrap *::after{box-sizing:border-box}

.wh-topbar{flex:0 0 auto;height:36px;display:flex;align-items:center;justify-content:flex-end;padding-left:46px}
.wh-bal{
  display:inline-flex;align-items:center;gap:6px;
  background:var(--wh-panel);border:1px solid var(--wh-line);border-radius:999px;padding:7px 14px;
  font-weight:800;font-size:15px;font-variant-numeric:tabular-nums;
}
.wh-bal .wh-cur{color:var(--wh-gold)}

/* ---------- колесо ---------- */
.wh-stage{flex:1 1 0;min-height:0;display:flex;align-items:center;justify-content:center;position:relative}
.wh-wheel{position:relative;height:100%;max-height:100%;aspect-ratio:1/1;max-width:100%;margin:0 auto}
.wh-plate{position:absolute;inset:0;width:100%;height:100%;display:block}

#wh-hl{opacity:0}
#wh-hl.on{animation:whHl .95s ease-out}
@keyframes whHl{
  0%{opacity:0}
  12%{opacity:.75}
  30%{opacity:.1}
  48%{opacity:.65}
  70%{opacity:.08}
  100%{opacity:0}
}

.wh-center{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:62%;text-align:center;pointer-events:none}
.wh-mult{font-size:clamp(26px,9vw,42px);font-weight:800;line-height:1;font-variant-numeric:tabular-nums;color:#e9edf5;letter-spacing:-.5px}
.wh-mult.lose{color:var(--wh-red)}
.wh-mult.win{color:var(--wh-green)}
.wh-mult.gold{color:var(--wh-gold)}
.wh-mult.pulse{animation:whPop .45s cubic-bezier(.2,1.5,.4,1)}
@keyframes whPop{0%{transform:scale(.72);opacity:.4}100%{transform:scale(1);opacity:1}}
.wh-sub{margin-top:7px;font-size:16px;font-weight:800;color:var(--wh-muted);font-variant-numeric:tabular-nums}
.wh-sub.win{color:var(--wh-green)}
.wh-sub.lose{color:var(--wh-red)}
.wh-sub.gold{color:var(--wh-gold)}
.wh-sub2{margin-top:3px;font-size:12px;font-weight:600;color:#6f7789}

/* стрелка */
.wh-arrow{
  position:absolute;left:50%;bottom:18.5%;
  width:14px;height:26px;
  transform:translateX(-50%);
  z-index:5;
  background:var(--wh-gold);
  clip-path:polygon(50% 100%,0 0,100% 0);
  filter:drop-shadow(0 -1px 3px rgba(0,0,0,.55));
  transition:background .1s linear;
}

.wh-conf{position:absolute;inset:0;pointer-events:none;overflow:hidden;z-index:6}
.wh-conf i{position:absolute;top:-10px;width:6px;height:10px;border-radius:2px;opacity:0;animation:whFall linear forwards}
@keyframes whFall{0%{opacity:1;transform:translate3d(0,0,0) rotate(0)}100%{opacity:0;transform:translate3d(0,110vh,0) rotate(600deg)}}

/* ---------- история выпадений ---------- */
.wh-hist{flex:0 0 auto;height:24px;display:flex;align-items:center;gap:6px;padding:0 2px;overflow:hidden}
.wh-hlab{font-size:10px;font-weight:800;letter-spacing:.6px;text-transform:uppercase;color:#5f6779;margin-right:2px;flex:0 0 auto}
.wh-hchip{
  flex:0 0 auto;height:22px;min-width:40px;padding:0 8px;border-radius:8px;
  display:flex;align-items:center;justify-content:center;
  font-size:11px;font-weight:800;color:#fff;font-variant-numeric:tabular-nums;
  animation:whChipIn .25s ease-out;
}
@keyframes whChipIn{0%{transform:scale(.6);opacity:0}100%{transform:scale(1);opacity:1}}
.wh-hchip.black{background:#3a4150}
.wh-hchip.red{background:var(--wh-red)}
.wh-hchip.green{background:var(--wh-green);color:#0d2413}
.wh-hchip.gold{background:var(--wh-gold);color:#2b1f00}

/* ---------- выбор цвета ---------- */
.wh-pickbar{
  flex:0 0 auto;height:18px;display:flex;align-items:center;justify-content:center;gap:6px;
  font-size:12px;font-weight:700;color:var(--wh-muted);
}
.wh-pickbar b{font-weight:900}
.wh-pickbar i{width:9px;height:9px;border-radius:50%;display:inline-block}

.wh-picks{flex:0 0 auto;display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.wh-pick{
  height:54px;border-radius:14px;cursor:pointer;
  background:var(--wh-panel);border:2px solid #333a49;
  color:#e9edf5;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;
  -webkit-tap-highlight-color:transparent;
  opacity:.62;
  transition:transform .12s ease,opacity .15s ease,background .15s ease,border-color .15s ease;
  font-family:inherit;
}
.wh-pick .wh-pname{font-size:9.5px;font-weight:800;letter-spacing:.4px;text-transform:uppercase;opacity:.85}
.wh-pick .wh-pmult{font-size:15px;font-weight:900;font-variant-numeric:tabular-nums;line-height:1}
.wh-pick:active{transform:scale(.96)}
.wh-pick.black{border-color:var(--wh-blackc)}
.wh-pick.red{border-color:var(--wh-red)}
.wh-pick.green{border-color:var(--wh-green)}
.wh-pick.gold{border-color:var(--wh-gold)}
.wh-pick.on{opacity:1;transform:translateY(-2px)}
.wh-pick.on.black{background:var(--wh-blackc);color:#fff;box-shadow:0 0 0 3px rgba(74,82,101,.35)}
.wh-pick.on.red{background:var(--wh-red);color:#fff;box-shadow:0 0 0 3px rgba(255,59,87,.3)}
.wh-pick.on.green{background:var(--wh-green);color:#0d2413;box-shadow:0 0 0 3px rgba(43,209,85,.28)}
.wh-pick.on.gold{background:var(--wh-gold);color:#2b1f00;box-shadow:0 0 0 3px rgba(255,198,26,.3)}
.wh-pick.hit{animation:whHit .5s ease-out}
@keyframes whHit{0%{transform:scale(1)}35%{transform:scale(1.08)}100%{transform:scale(1)}}

/* ---------- низ ---------- */
.wh-msg{flex:0 0 auto;height:18px;min-height:18px;display:flex;align-items:center;justify-content:center;
  font-size:12.5px;font-weight:700;opacity:0;visibility:hidden;transition:opacity .16s}
.wh-msg.show{opacity:1;visibility:visible}
.wh-msg.win{color:var(--wh-green)}
.wh-msg.lose{color:var(--wh-red)}
.wh-msg.info{color:var(--wh-muted)}

.wh-panel{flex:0 0 auto;display:flex;flex-direction:column;gap:8px}
.wh-betrow{display:flex;gap:8px}
.wh-betbtn{flex:0 0 auto;width:46px;height:46px;border-radius:12px;border:1px solid var(--wh-line);
  background:var(--wh-panel);color:#fff;font-size:20px;font-weight:800;line-height:1;cursor:pointer;
  -webkit-tap-highlight-color:transparent;font-family:inherit}
.wh-betbtn:active{transform:scale(.95)}
.wh-betbtn:disabled{opacity:.45}
.wh-betfield{flex:1 1 auto;min-width:0;height:46px;display:flex;align-items:center;justify-content:center;gap:6px;
  background:var(--wh-panel);border:1px solid var(--wh-line);border-radius:12px;padding:0 10px}
.wh-betfield:focus-within{border-color:var(--wh-gold)}
.wh-bet{width:auto;max-width:100%;background:transparent;border:none;outline:none;padding:0;
  color:#fff;font-weight:800;font-size:16px;font-family:inherit;text-align:right;font-variant-numeric:tabular-nums}
.wh-cur{color:var(--wh-gold);font-weight:800;font-size:16px;line-height:1}

.wh-spin{width:100%;height:52px;border:none;border-radius:14px;cursor:pointer;font-family:inherit;
  font-size:16.5px;font-weight:800;color:#0f2a12;
  background:linear-gradient(180deg,#41e06a,#22b845);
  -webkit-tap-highlight-color:transparent;
  transition:transform .1s ease,opacity .15s ease}
.wh-spin:active{transform:scale(.98)}
.wh-spin:disabled{opacity:.55;cursor:default}

@media (max-height:720px){
  .wh-wrap{gap:6px}
  .wh-topbar{height:32px}
  .wh-pick{height:48px}
  .wh-pick .wh-pmult{font-size:14px}
  .wh-betbtn,.wh-betfield{height:42px}
  .wh-spin{height:48px;font-size:15.5px}
  .wh-sub{font-size:15px;margin-top:5px}
  .wh-arrow{height:23px;width:13px}
}
@media (max-height:620px){
  .wh-hist{display:none}
  .wh-msg{height:16px;min-height:16px;font-size:12px}
}
@media (prefers-reduced-motion:reduce){
  #wh-hl.on,.wh-conf i,.wh-pick.hit,.wh-mult.pulse,.wh-hchip{animation:none}
}

/* v8: strelka vyshe kolca */
.wh-arrow{bottom:18.5%}
@media (max-height:720px){.wh-arrow{bottom:19.5%}}

/* ===== v9: strelka s obvodkoy + vyravnivanie topbara ===== */
.wh-wrap{padding-top:calc(env(safe-area-inset-top,0px) + 9px)}
.wh-topbar{height:38px;min-height:38px;align-items:center}
.wh-arrow{
  width:17px;height:32px;bottom:18.5%;
  background:linear-gradient(180deg,#ffffff,#dbe2f0 46%,#9aa5bd);
  clip-path:polygon(50% 100%,0 0,100% 0);
  filter:drop-shadow(0 2px 4px rgba(0,0,0,.6)) drop-shadow(0 0 8px var(--wh-ac,#ffc61a));
  transition:filter .12s linear;
}
.wh-arrow::before{
  content:"";position:absolute;left:2px;right:2px;top:2px;bottom:0;
  background:var(--wh-ac,#ffc61a);
  background-image:linear-gradient(180deg,rgba(255,255,255,.42),rgba(0,0,0,.22));
  clip-path:polygon(50% 100%,0 0,100% 0);
  transition:background-color .1s linear;
}
.wh-arrow::after{
  content:"";position:absolute;left:4px;top:4px;width:4px;height:13px;
  background:linear-gradient(180deg,rgba(255,255,255,.9),rgba(255,255,255,0));
  border-radius:2px;
}
@media (max-height:720px){.wh-arrow{width:15px;height:28px;bottom:19.5%}
  .wh-arrow::after{height:11px}
  .wh-topbar{height:38px;min-height:38px}}

/* ===== v10: stroka "Stavka na" vsegda vidna ===== */
.wh-pickbar{
  display:flex!important;height:22px;min-height:22px;
  align-items:center;justify-content:center;gap:7px;
  font-size:13px;font-weight:800;color:#b6bece;
}
.wh-pickbar i{width:10px;height:10px;border-radius:50%;box-shadow:0 0 8px currentColor}
.wh-pickbar b{font-weight:900;font-size:13.5px}
@media (max-height:620px){.wh-pickbar{height:19px;min-height:19px;font-size:12px}}