/* =========================================================================
   DICE area — Dice Roulette: the wheel (.dw*) and the screen around it (.dc*).
   The wheel (green win arc + golden sector to exact scale, glass hub, gold
   pointer) is described in its own section below. The whole screen fits one
   viewport: the wheel takes the height that is left after the controls.
   ========================================================================= */

/* ------------------------------------------------------------- wheel (.dw*) — js/views/dice-wheel.js
   Machined graphite bezel with a thin gold rim and a 100-tick chapter ring, a recessed
   track, the green win arc and the golden sector drawn in SVG to exact scale (no glow
   that could read as a wider zone), a glass hub, and a gold pointer that turns on its own
   compositor layer: per frame only its transform and the speed trail's opacity change. */
.dw {
  position: relative; width: 100%; height: 100%;
  container-type: inline-size;
  font-family: var(--font-text);
  -webkit-user-select: none; user-select: none;
  -webkit-tap-highlight-color: transparent;
}
.dw > i, .dw > svg, .dw > .dw__hub, .dw > .dw__ptr { position: absolute; }

.dw__shadow {
  inset: 4% 3% -5%; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(0, 0, 0, 0.66), rgba(0, 0, 0, 0.32) 64%, rgba(0, 0, 0, 0));
}

/* bezel: flat dark ring with one hairline highlight on top */
.dw__bezel {
  inset: 0; border-radius: 50%;
  background: linear-gradient(180deg, #262931 0%, #1d1f26 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 14px 30px -16px rgba(0, 0, 0, 0.8);
}
/* thin, quiet gold line on the outer edge */
.dw__rim {
  inset: 0; border-radius: 50%; opacity: 0.55;
  background: linear-gradient(180deg, #f3c25a, #b8812a);
  -webkit-mask: radial-gradient(closest-side, transparent calc(100% - 2.2px), #000 calc(100% - 1.6px), #000 calc(100% - 0.5px), transparent 100%);
  mask: radial-gradient(closest-side, transparent calc(100% - 2.2px), #000 calc(100% - 1.6px), #000 calc(100% - 0.5px), transparent 100%);
}
.dw > svg { inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
/* win flashes: exact copies of the arc / golden sector in their own layers, faded in and out */
.dw > .dw__fx { opacity: 0; }
.dw > .dw__mark { transform-origin: 50% 20.7%; }

/* light that runs once around the bezel on a bigger win (rotates; opacity + transform only) */
.dw__sweep {
  inset: 0; border-radius: 50%; opacity: 0; pointer-events: none;
  background: conic-gradient(from 0deg, rgba(220, 255, 236, 0) 0deg, rgba(220, 255, 236, 0) 250deg, rgba(232, 255, 242, 0.9) 357deg, rgba(220, 255, 236, 0) 360deg);
  -webkit-mask: radial-gradient(closest-side, transparent 87.6%, #000 88.6%, #000 98.6%, transparent 99.6%);
  mask: radial-gradient(closest-side, transparent 87.6%, #000 88.6%, #000 98.6%, transparent 99.6%);
}
.dw.is-golden .dw__sweep {
  background: conic-gradient(from 0deg, rgba(255, 214, 110, 0) 0deg, rgba(255, 214, 110, 0) 230deg, rgba(255, 240, 190, 0.95) 357deg, rgba(255, 214, 110, 0) 360deg);
}

/* hub: dark glass in a steel collar (the collar is in the SVG) */
.dw > .dw__hub { inset: 21.5%; border-radius: 50%; display: grid; place-items: center; }
.dw__glass {
  position: absolute; inset: 0; border-radius: 50%;
  background: #15171d;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.05);
}
.dw__face {
  grid-area: 1 / 1; position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 1.6cqw; max-width: 92%; text-align: center;
  opacity: 0; transform: scale(0.92);
  transition: opacity 200ms var(--ease-standard), transform 340ms var(--ease-spring);
}
.dw__face.is-on { opacity: 1; transform: none; }
.dw__mult {
  font-family: var(--font-display); font-weight: 800; line-height: 1; letter-spacing: -0.03em; white-space: nowrap;
  font-size: 30px; font-size: 11cqw; color: #f5f3ff;
}
.dw__mult[data-len='6'] { font-size: 9.6cqw; }
.dw__mult[data-len='7'] { font-size: 8.4cqw; }
.dw__pct {
  font-weight: 800; line-height: 1; letter-spacing: 0.01em; white-space: nowrap;
  font-size: 12px; font-size: max(10px, 4.1cqw); color: rgba(214, 218, 236, 0.5);
}
.dw__pct[hidden], .dw__gold[hidden] { display: none; }
.dw__gold {
  display: inline-flex; align-items: center; gap: 0.32em; line-height: 1; white-space: nowrap;
  font-weight: 800; font-size: 11px; font-size: max(10px, 3.9cqw); letter-spacing: 0.01em;
  color: #ffd260;
}
.dw__gemi { display: block; width: 0.95em; height: 0.95em; flex: none; }

.dw__res {
  display: inline-flex; align-items: center; gap: 0.14em; white-space: nowrap;
  font-family: var(--font-display); font-weight: 800; line-height: 1; letter-spacing: -0.035em;
  font-size: 24px; font-size: 8.6cqw; color: #4fe39a;
}
.dw__res .coin { --coin: 0.8em; }
.dw__rescap {
  display: inline-flex; align-items: center; gap: 0.3em; white-space: nowrap; line-height: 1;
  font-weight: 800; font-size: 12px; font-size: max(10px, 4.1cqw); color: rgba(214, 218, 236, 0.6);
}
.dw__rescap:empty { display: none; }
.dw.is-golden .dw__res { color: #ffd260; }
.dw.is-golden .dw__rescap { color: #ffd260; }
.dw.is-lose .dw__res { font-size: 7cqw; color: rgba(214, 218, 236, 0.62); letter-spacing: -0.02em; }

/* pointer + its speed trail (both rotated by JS) */
.dw > .dw__ptr, .dw > .dw__trail { inset: 0; pointer-events: none; will-change: transform; }
.dw__psvg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; transform-origin: 50% 4.5%; }
.dw > .dw__trail {
  border-radius: 50%; opacity: 0; will-change: transform, opacity;
  /* a streak of light over the tick ring, brightest right behind the pointer */
  background: conic-gradient(from -42deg, rgba(255, 228, 160, 0) 0deg, rgba(255, 232, 170, 0.38) 26deg, rgba(255, 244, 205, 0.92) 41deg, rgba(255, 228, 160, 0) 41.4deg);
  -webkit-mask: radial-gradient(closest-side, transparent 89.4%, #000 90.4%, #000 95.6%, transparent 96.6%);
  mask: radial-gradient(closest-side, transparent 89.4%, #000 90.4%, #000 95.6%, transparent 96.6%);
}

@media (prefers-reduced-motion: reduce) {
  .dw__face { transition: opacity 150ms linear; transform: none; }
}

/* ------------------------------------------------------------- screen: one viewport */
.dc {
  display: flex; flex-direction: column; gap: 10px;
  min-height: 100%;
  /* the wheel's halo may reach past the screen edge: clip, never scroll sideways */
  overflow-x: hidden; overflow-x: clip;
}
.dc-fx { position: fixed; inset: 0; z-index: 60; pointer-events: none; }

/* compact bar: back · title · balance */
.dc-bar { flex: none; display: flex; align-items: center; gap: var(--s-2); height: 40px; }
.dc.is-tg .dc-bar__btn[data-go='back'] { display: none; }
.dc-bar__btn {
  flex: none; width: 40px; height: 40px; display: grid; place-items: center; border-radius: 13px; color: var(--text);
  background: var(--surface-1); border: 1px solid var(--line); border-top-color: var(--line-top);
}
.dc-bar__btn .ic { width: 20px; height: 20px; }
.dc-bar__bal {
  flex: none; display: inline-flex; align-items: center; gap: 7px; height: 40px; padding: 0 4px 0 11px; border-radius: 13px;
  font-weight: 800; font-size: var(--fs-md);
  background: var(--surface-1); border: 1px solid var(--line); border-top-color: var(--line-top);
}
.dc-bar__bal > .coin { --coin: 19px; }
.dc-bar__bal.is-hit { animation: dc-hit 520ms var(--ease-spring); }
@keyframes dc-hit { 35% { transform: scale(1.08); } }
.dc-bar__plus { width: 32px; height: 32px; display: grid; place-items: center; border-radius: 10px; color: #fff; background: var(--violet-500); }
.dc-bar__plus .ic { width: 18px; height: 18px; --ic-stroke: 2.4; }

/* the wheel fills whatever height is left (container query units) */
.dc-stage { flex: 1 1 0; min-height: 180px; display: grid; place-items: center; container-type: size; }
.dc-wheel { width: min(100cqw, 100cqh, 300px); aspect-ratio: 1; container-type: inline-size; }

/* recent spins live in the bar, between back and balance; fades out at the right edge */
.dc-recent {
  flex: 1; min-width: 0; display: flex; gap: 6px; overflow-x: auto; height: 40px; align-items: center;
  -webkit-mask: linear-gradient(90deg, #000 calc(100% - 18px), transparent);
  mask: linear-gradient(90deg, #000 calc(100% - 18px), transparent);
}
.dc-chip {
  flex: none; display: inline-flex; align-items: center; height: 26px; padding: 0 10px; border-radius: 9px;
  font-size: var(--fs-xs); font-weight: 800; border: 1px solid transparent;
}
.dc-chip.is-win { color: #4fe39a; background: rgba(34, 197, 120, 0.12); border-color: rgba(34, 197, 120, 0.32); }
.dc-chip.is-lose { color: var(--text-2); background: rgba(255, 255, 255, 0.04); border-color: var(--line); }
.dc-chip.is-latest { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08); }

.dc-panel {
  flex: none; display: flex; flex-direction: column; gap: 8px; padding: 10px;
  border-radius: var(--r-2xl);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.025), rgba(255, 255, 255, 0) 40%), var(--surface-1);
  border: 1px solid var(--line); border-top-color: var(--line-top);
  box-shadow: var(--hl-top), var(--shadow-2);
}
.dc-row { display: flex; gap: 6px; align-items: stretch; }
.dc-amount, .dc-chance { flex: 1; min-width: 0; }

.dc-amount .stepper__row, .dc-chance .stepper__row { height: 46px; padding: 4px; border-radius: 14px; background: var(--bg-0); }
.dc-amount .stepper__btn, .dc-chance .stepper__btn {
  width: 38px; border-radius: 10px; font-family: var(--font-text); font-size: var(--fs-md); color: var(--text);
  background: linear-gradient(180deg, #2b2b31, #232328);
}
.dc-amount .stepper__btn b { font-weight: 800; font-size: var(--fs-sm); }
.dc-amount .stepper__field { gap: 6px; }
.dc-amount .stepper__field .coin { --coin: 18px; }
.dc-amount .stepper__input, .dc-chance .stepper__input {
  flex: 0 1 auto; min-width: 0; text-align: center;
  font-family: var(--font-display); font-weight: 700; letter-spacing: -0.02em; font-size: var(--fs-lg);
}
.dc-amount .stepper__input { width: 5.4ch; }
.dc-chance .stepper__field { gap: 2px; }
.dc-chance .stepper__input { flex: 1 1 auto; width: 100%; text-align: right; } /* fills the gap between − and +, so 49.25 always fits */
.dc-chance .stepper__suffix { font-size: var(--fs-sm); color: var(--text-3); }
.dc .stepper.is-disabled { opacity: 0.55; }

.dc-q {
  flex: none; height: 46px; padding: 0; border-radius: 14px; font-size: var(--fs-sm); font-weight: 800; color: var(--text-2);
  background: var(--surface-2); border: 1px solid var(--line); border-top-color: var(--line-top);
  transition: color var(--dur-fast), background var(--dur-fast), border-color var(--dur-fast);
}
.dc-q--max { width: 58px; }
.dc-q--preset { width: 50px; }
.dc-q.is-active { color: var(--violet-300); background: var(--primary-tint); border-color: rgba(132, 104, 246, 0.42); border-top-color: rgba(195, 181, 255, 0.5); }
.dc-q:disabled { opacity: 0.45; }

/* chance slider: grey track, green fill up to the chosen chance — same language as the wheel */
.dc-slider {
  --p: 50%;
  -webkit-appearance: none; appearance: none; width: 100%; height: 22px; margin: 0; background: transparent; cursor: pointer;
}
.dc-slider:disabled { opacity: 0.5; cursor: default; }
.dc-slider::-webkit-slider-runnable-track {
  height: 6px; border-radius: 3px;
  background: linear-gradient(90deg, #1ac47e 0, #2ee09a var(--p), #2c3039 var(--p));
}
.dc-slider::-moz-range-track { height: 6px; border-radius: 3px; background: linear-gradient(90deg, #1ac47e 0, #2ee09a var(--p), #2c3039 var(--p)); }
.dc-slider::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none; width: 20px; height: 20px; margin-top: -7px; border-radius: 50%;
  background: #fff; box-shadow: 0 0 0 4px rgba(46, 224, 154, 0.18), 0 2px 5px rgba(0, 0, 0, 0.5);
}
.dc-slider::-moz-range-thumb { width: 20px; height: 20px; border: 0; border-radius: 50%; background: #fff; box-shadow: 0 0 0 4px rgba(46, 224, 154, 0.18), 0 2px 5px rgba(0, 0, 0, 0.5); }

/* spin button */
.dc-spin {
  position: relative; display: grid; place-items: center; width: 100%; height: 52px; overflow: hidden; isolation: isolate;
  border-radius: 16px; color: #fff;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3), 0 10px 22px -12px rgba(109, 80, 232, 0.8);
}
.dc-spin__bg {
  position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, #9a83ff 0%, var(--violet-500) 50%, var(--violet-600) 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.28), inset 0 -2px 0 rgba(0, 0, 0, 0.16);
}
.dc-spin__label { font-size: var(--fs-md); font-weight: 800; letter-spacing: -0.01em; white-space: nowrap; }
.dc-spin:disabled { box-shadow: none; cursor: default; }
.dc-spin:disabled .dc-spin__bg { background: var(--surface-3); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06); }
.dc-spin:disabled .dc-spin__label { color: var(--text-2); }
.dc-spin.is-spinning .dc-spin__bg {
  background:
    repeating-linear-gradient(115deg, rgba(255, 255, 255, 0.07) 0 12px, transparent 12px 24px),
    linear-gradient(180deg, #4a3d8f, #3b2f78);
  background-size: 52px 100%, 100% 100%;
  animation: dc-stripes 0.7s linear infinite;
}
.dc-spin.is-spinning .dc-spin__label { color: rgba(255, 255, 255, 0.85); }
@keyframes dc-stripes { to { background-position: 52px 0, 0 0; } }

/* turbo toggle next to the spin button */
.dc-fast {
  flex: none; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  width: 64px; height: 52px; border-radius: 16px; color: var(--text-3);
  background: var(--surface-2); border: 1px solid var(--line); border-top-color: var(--line-top);
  transition: color var(--dur-fast), background var(--dur-fast), border-color var(--dur-fast);
}
.dc-fast .ic { width: 18px; height: 18px; --ic-stroke: 2; }
.dc-fast span { font-size: var(--fs-2xs); font-weight: 800; letter-spacing: 0.01em; white-space: nowrap; }
.dc-fast.is-active {
  color: var(--violet-300); background: var(--primary-tint);
  border-color: rgba(132, 104, 246, 0.42); border-top-color: rgba(195, 181, 255, 0.5);
}
.dc-fast.is-active .ic { --ic-fill: 0.35; }
.dc-fast:disabled { opacity: 0.45; }

/* one line under the button: multiplier · potential win (or a hint when you can't spin) */
.dc-sum { display: grid; place-items: center; height: 18px; font-size: var(--fs-xs); font-weight: 700; color: var(--text-3); }
.dc-sum > * { grid-area: 1 / 1; transition: opacity var(--dur-fast); }
.dc-sum__line { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; }
.dc-sum__line > span { display: inline-flex; align-items: center; gap: 4px; }
.dc-sum__line b { color: var(--text); font-weight: 800; }
.dc-sum__line .coin { --coin: 13px; }
.dc-sum__line .dc-sum__win { color: var(--green-400); }
.dc-sum__dot { width: 3px; height: 3px; border-radius: 50%; background: var(--text-3); }
.dc-sum__hint { opacity: 0; color: var(--gold-400); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.dc-sum.has-hint .dc-sum__line { opacity: 0; }
.dc-sum.has-hint .dc-sum__hint { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  .dc-spin.is-spinning .dc-spin__bg { animation: none; }
}

/* narrow phones: give the chance field room next to the presets */
@media (max-width: 380px) {
  .dc-q--preset { width: 44px; font-size: var(--fs-xs); }
  .dc-q--max { width: 52px; }
  .dc-amount .stepper__btn, .dc-chance .stepper__btn { width: 32px; }
  .dc-chance .stepper__input { font-size: var(--fs-md); }
  .dc-amount .stepper__input { font-size: var(--fs-md); }
}

/* ------------------------------------------------------------- golden sector, sound, share */
.dc-chip.is-gold { color: #ffd76a; background: rgba(255, 196, 60, 0.12); border-color: rgba(255, 196, 60, 0.38); }
.dc-sum__line .dc-sum__gold { color: #ffcf5a; }
.dc-bar__btn--sfx { color: var(--text-2); }
.dc-bar__btn--sfx.is-muted { color: var(--text-3); }
.dc-bar__btn--sfx [data-sfx-icon] { display: grid; place-items: center; }
.dc-bar__btn--sfx svg { width: 20px; height: 20px; }

/* share a win: shown in the bar after a win until the next spin */
.dc-bar__btn--share { color: var(--green-400); }
/* hidden = invisible but still in the row: toggling it never re-lays out the bar (a resize of the
   masked chip strip crashed Chromium's compositor) */
.dc-bar__btn--share[hidden] { display: grid; visibility: hidden; }

/* narrow phones: the summary keeps the numbers, drops the long labels */
@media (max-width: 389px) {
  .dc-sum__k { display: none; }
  .dc-sum__line { gap: 6px; }
}

/* very narrow windows (Telegram Desktop zoomed in): keep the chance number readable */
@media (max-width: 359px) {
  .dc-q--preset { width: 40px; font-size: var(--fs-xs); }
  .dc-q--max { width: 46px; font-size: var(--fs-xs); }
  .dc-amount .stepper__btn, .dc-chance .stepper__btn { width: 30px; }
  .dc-amount .stepper__input, .dc-chance .stepper__input { font-size: var(--fs-md); }
  .dc-chance .stepper__input { min-width: 2.4ch; }
  .dc-fast { width: 56px; }
}
@media (max-width: 329px) {
  .dc-q--preset[data-preset='35'] { display: none; }
}