/* =====================================================================
   PrivateDrop v2.21 — upgrade dial (mechanical bezel / instrument style)
   Markup: upgrade-board bundle, component `nn` (.pd-dial).
   --pd-z = win-zone width in degrees = 2·acos(1 − 2p), i.e. exactly the
   sector the server-side landing (hn) treats as a win, centred on 6 o'clock.
   viewBox radii (400 units): bezel 200→176 · channel 176→156 (arc r=166)
   · face 156 · inner hairline ring r=150.
   ===================================================================== */

@property --pd-z{syntax:'<number>';inherits:true;initial-value:0}

.pd-dial{
  transition:--pd-z .9s cubic-bezier(.22,1,.36,1);
  animation:pd-dial-ignite 1.25s cubic-bezier(.22,1,.36,1);
}
@keyframes pd-dial-ignite{from{--pd-z:0}}

/* ---------- bezel: thick gunmetal ring, faint knurl + soft top-left light ---------- */
.pd-dial-bezel{
  position:absolute;
  inset:0;
  border-radius:50%;
  pointer-events:none;
  background:
    radial-gradient(120% 85% at 28% 4%, rgba(255,246,226,.075) 0%, transparent 46%),
    repeating-conic-gradient(from 0deg, rgba(255,255,255,.022) 0deg .45deg, transparent .45deg 1.5deg),
    conic-gradient(from 205deg,#2a2c31,#3b3e44 9%,#25272b 21%,#33363b 35%,#1e2024 50%,#373a40 63%,#222428 78%,#32353a 90%,#2a2c31);
  box-shadow:
    0 2cqw 6cqw rgba(0,0,0,.55),
    0 .4cqw 1cqw rgba(0,0,0,.45),
    inset 0 0 0 .28cqw #0b0c0e,
    inset 0 .55cqw .5cqw rgba(255,248,232,.09),
    inset 0 -.6cqw 1cqw rgba(0,0,0,.55);
}

/* ---------- face: deep graphite, lots of air ---------- */
.pd-dial-face{
  position:absolute;
  top:50%;
  left:50%;
  width:78%;
  aspect-ratio:1;
  transform:translate(-50%,-50%);
  border-radius:50%;
  pointer-events:none;
  background:radial-gradient(circle at 50% 36%,#232529 0%,#191a1e 46%,#111215 100%);
  box-shadow:
    inset 0 0 0 .25cqw #090a0c,
    inset 0 1.4cqw 3.2cqw rgba(0,0,0,.6),
    inset 0 -.5cqw 1.4cqw rgba(255,240,210,.025);
  transition:box-shadow .5s ease;
}
.pd-dial-face::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  background:repeating-radial-gradient(circle at 50% 50%,rgba(255,255,255,.014) 0 1px,transparent 1px 3px);
  opacity:.8;
}

/* ---------- svg layer: ticks, channel, gold arc, leading edges, hairline ring ---------- */
.pd-dial-svg{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  overflow:visible;
  pointer-events:none;
}
.pd-dial-tick{stroke:rgba(232,214,174,.16);stroke-width:1.1;stroke-linecap:round}
.pd-dial-tick-mid{stroke:rgba(232,214,174,.30);stroke-width:1.5}
.pd-dial-tick-major{stroke:rgba(240,224,186,.55);stroke-width:2.2}

.pd-dial-track{fill:none;stroke:#0b0c0f;stroke-width:20}
.pd-dial-edge-o{fill:none;stroke:rgba(0,0,0,.65);stroke-width:1.2}
.pd-dial-edge-i{fill:none;stroke:rgba(255,244,220,.06);stroke-width:1}
.pd-dial-inner-ring{fill:none;stroke:rgba(222,196,140,.20);stroke-width:1.2}

.pd-dial-arc,
.pd-dial-head{
  transform-box:view-box;
  transform-origin:200px 200px;
}
.pd-dial-arc{
  fill:none;
  stroke:url(#pdDialGold);
  stroke-width:10;
  stroke-linecap:round;
  /* pathLength = 360 → dash units are degrees; rotate so the lit sector is centred on 6 o'clock */
  stroke-dasharray:calc(var(--pd-z) * 1px) 400px;
  transform:rotate(calc((90 - var(--pd-z) / 2) * 1deg));
  transition:opacity .45s ease;
}
.pd-dial-arc-glow{stroke-width:15;opacity:.42}
.pd-dial-arc-spec{stroke:rgba(255,242,212,.5);stroke-width:1.3}

.pd-dial-head{transition:opacity .35s ease}
.pd-dial-head-a{transform:rotate(calc((90 - var(--pd-z) / 2) * 1deg))}
.pd-dial-head-b{transform:rotate(calc((90 + var(--pd-z) / 2) * 1deg))}
.pd-dial-head-glow{fill:rgba(246,214,140,.6)}
.pd-dial-head-core{fill:#fff3d4}

/* ---------- pointer: champagne gauge needle. Its hub rides the inner rail of the arc channel (r~158 of 200,
   clear of every centre caption; "Проигрыш" reaches r~151), the two-facet tapered blade crosses the arc
   to the bezel ticks (tip r~196): ~2.5x the old marker. Dark outline + contact shadow keep it readable on the
   gold arc, a warm glow on top. Rotates with the wrapper exactly as the old marker did. ---------- */
.pd-dial ._arrowWrapper_1wf90_124{z-index:1}
.pd-dial ._arrow_1wf90_124{
  top:1%;
  width:5.08%;
  height:auto;
  transform:translate(-50%,0);
  overflow:visible;
  color:#ecd8a6;
  filter:drop-shadow(0 0 .6cqw rgba(246,206,120,.42)) drop-shadow(0 .55cqw .75cqw rgba(0,0,0,.72));
}

/* ---------- reference labels, engraved & quiet ---------- */
.pd-dial ._ringLabel_1wf90_187{
  top:calc(50% - 50cqw - 11px);
  color:rgba(232,214,174,.42);
  font-family:Inter,"Segoe UI",Arial,sans-serif;
  font-size:clamp(8px,2.6cqw,11px);
  font-weight:600;
  letter-spacing:.12em;
}
.pd-dial ._ringLabelBottom_1wf90_198{top:calc(50% + 50cqw + 11px)}
.pd-dial ._ringLabelLeft_1wf90_202{top:50%;left:calc(50% - 50cqw - 11px)}
.pd-dial ._ringLabelRight_1wf90_208{top:50%;left:calc(50% + 50cqw + 11px)}
.pd-dial[data-state=empty] ._ringLabel_1wf90_187{color:rgba(232,214,174,.2)}

/* ---------- centre: big percent, warm gold, clean ---------- */
.pd-dial ._wheelOverlay_1wf90_146{gap:1cqw;filter:none}
.pd-dial ._chancePercent_1wf90_159{
  background:linear-gradient(180deg,#f8e9c2 0%,#ebc46a 52%,#c9902c 100%);
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
  font-family:Inter,"Segoe UI",Arial,sans-serif;
  font-size:clamp(20px,13.5cqw,56px);
  font-weight:600;
  line-height:1.1;
  letter-spacing:-.025em;
  filter:drop-shadow(0 .7cqw 1.3cqw rgba(0,0,0,.6));
}
.pd-dial ._chanceLabel_1wf90_172{
  background:none;
  -webkit-text-fill-color:rgba(232,214,174,.55);
  color:rgba(232,214,174,.55);
  font-family:Inter,"Segoe UI",Arial,sans-serif;
  font-size:clamp(8px,2.9cqw,12px);
  font-weight:600;
  letter-spacing:.2em;
  text-transform:uppercase;
}
.pd-dial ._chancePercentLost_1wf90_182{background:none;-webkit-text-fill-color:#b9675c}

/* ---------- states ---------- */
.pd-dial[data-state=empty] .pd-dial-arc,
.pd-dial[data-state=empty] .pd-dial-head{opacity:0}
.pd-dial[data-state=won] .pd-dial-head{opacity:0}
.pd-dial[data-state=won] .pd-dial-arc-glow{opacity:.75}
.pd-dial[data-state=won] .pd-dial-face{
  box-shadow:
    inset 0 0 0 .25cqw #090a0c,
    inset 0 1.4cqw 3.2cqw rgba(0,0,0,.55),
    inset 0 0 9cqw rgba(226,176,74,.13);
}
/* win answers on the result frame, together with the hit sound: the win arc flashes and settles,
   the face warms at once (instead of the .45–.5s fades used for the other states) */
.pd-dial[data-state=won] .pd-dial-head{transition-duration:.1s}
.pd-dial[data-state=won] .pd-dial-arc-glow{animation:pd-dial-win-arc .75s cubic-bezier(.2,.8,.25,1) both}
.pd-dial[data-state=won] .pd-dial-face{animation:pd-dial-win-face .9s cubic-bezier(.2,.8,.25,1) both}
@keyframes pd-dial-win-arc{
  0%{opacity:1;stroke-width:24}
  100%{opacity:.75;stroke-width:15}
}
@keyframes pd-dial-win-face{
  0%{box-shadow:inset 0 0 0 .25cqw #090a0c,inset 0 1.4cqw 3.2cqw rgba(0,0,0,.4),inset 0 0 14cqw rgba(240,190,80,.34)}
  100%{box-shadow:inset 0 0 0 .25cqw #090a0c,inset 0 1.4cqw 3.2cqw rgba(0,0,0,.55),inset 0 0 9cqw rgba(226,176,74,.13)}
}
.pd-dial[data-state=lost] .pd-dial-arc{opacity:.26}
.pd-dial[data-state=lost] .pd-dial-arc-glow,
.pd-dial[data-state=lost] .pd-dial-head{opacity:0}

/* ---------- centre chevrons (reference 1): big when idle, crest above the percent otherwise ---------- */
.pd-dial-chev{
  display:block;
  flex:0 0 auto;
  width:12cqw;
  height:auto;
  overflow:visible;
  filter:drop-shadow(0 0 3.4cqw rgba(214,170,92,.30));
  transition:width .45s cubic-bezier(.22,1,.36,1),margin .45s cubic-bezier(.22,1,.36,1),opacity .3s ease;
  margin-bottom:.6cqw;
}
.pd-dial[data-state=empty] .pd-dial-chev{width:27cqw;margin:0;filter:drop-shadow(0 0 6cqw rgba(214,170,92,.28))}
.pd-dial[data-state=lost] .pd-dial-chev{opacity:.45}

/* ---------- phones: same instrument, sized to the column ---------- */
@media (max-width:767px){
  ._wheelWrap_1wf90_15.pd-dial{width:min(64vw,252px)}
  .pd-dial ._ringLabel_1wf90_187{top:calc(50% - 50cqw - 9px);font-size:9px;letter-spacing:.08em}
  .pd-dial ._ringLabelBottom_1wf90_198{top:calc(50% + 50cqw + 9px)}
  .pd-dial ._ringLabelLeft_1wf90_202{top:50%;left:calc(50% - 50cqw - 9px)}
  .pd-dial ._ringLabelRight_1wf90_208{top:50%;left:calc(50% + 50cqw + 9px)}
  .pd-dial ._chanceLabel_1wf90_172{font-size:9px;letter-spacing:.16em}
}

/* ---------- phones: compositor layers so the static bezel/face (knurl, big shadows,
   textures) rasterise once; only the arc SVG, the spinning pointer and the centre text
   repaint/move. No visual change. ---------- */
@media (max-width:767px){
  .pd-dial-svg,
  .pd-dial ._arrowWrapper_1wf90_124,
  .pd-dial ._wheelOverlay_1wf90_146{will-change:transform}
}

@media (prefers-reduced-motion:reduce){
  .pd-dial{animation:none;transition:none}
  .pd-dial-chev{transition:none}
  .pd-dial[data-state=won] .pd-dial-arc-glow,
  .pd-dial[data-state=won] .pd-dial-face{animation:none}
}