/* 27.1.95 · Ruleta Free Fire compartida entre tienda, área cliente y vista previa administrativa. */
body.store-roulette-open{overflow:hidden}
.store-roulette-reward-overlay{
  position:fixed;inset:0;z-index:10080;display:grid;place-items:center;padding:18px;
  background:rgba(2,1,12,.78);backdrop-filter:blur(9px);animation:gtRouletteFade .22s ease both;
}
.store-roulette-reward-overlay.is-closing{animation:gtRouletteFadeOut .24s ease both}
.store-roulette-reward{
  width:min(94vw,520px);max-height:min(90vh,760px);overflow:auto;position:relative;padding:25px 20px 22px;
  border:1px solid rgba(22,220,244,.34);border-radius:26px;
  background:radial-gradient(circle at 90% 8%,rgba(236,72,153,.18),transparent 34%),linear-gradient(155deg,#190b48,#09031e 72%);
  box-shadow:0 30px 90px rgba(0,0,0,.62),0 0 0 1px rgba(255,255,255,.03) inset;text-align:center;
}
.store-roulette-close{position:absolute;right:14px;top:14px;width:40px;height:40px;border-radius:13px;border:1px solid var(--line);background:rgba(10,4,35,.7);color:#fff;font-size:1.5rem;cursor:pointer}
.store-roulette-close:disabled{opacity:.5;cursor:not-allowed}
.store-roulette-kicker{display:block;margin-bottom:5px;color:var(--cyan);font:900 .72rem Rajdhani,sans-serif;letter-spacing:.18em}
.store-roulette-reward h2{margin:0 38px 5px;color:#fff;font:900 1.65rem Rajdhani,sans-serif}
.store-roulette-reward>p{margin:0 auto 14px;max-width:420px;color:var(--muted);font-size:.84rem;line-height:1.42}
.store-roulette-wheel-shell{width:min(72vw,320px);aspect-ratio:1;margin:12px auto 16px;position:relative;padding:8px;border-radius:50%;background:rgba(255,255,255,.05);box-shadow:0 0 35px rgba(22,220,244,.12)}
.store-roulette-pointer{position:absolute;z-index:7;left:50%;top:-5px;transform:translateX(-50%);color:#facc15;font-size:1.45rem;filter:drop-shadow(0 3px 5px #000)}
.store-roulette-wheel{width:100%;height:100%;position:relative;z-index:1;border-radius:50%;border:5px solid rgba(255,255,255,.13);background:conic-gradient(#10b981 0 14.285%,#3b166f 14.285% 28.57%,#06b6d4 28.57% 42.855%,#f59e0b 42.855% 57.14%,#8b5cf6 57.14% 71.425%,#57134f 71.425% 85.71%,#ec4899 85.71% 100%);box-shadow:inset 0 0 35px rgba(0,0,0,.42),0 0 0 3px rgba(22,220,244,.12);will-change:transform}
.store-roulette-wheel::before,.store-roulette-wheel::after{content:"";position:absolute;inset:0;border-radius:50%;background:repeating-conic-gradient(from 0deg,rgba(255,255,255,.20) 0 .6deg,transparent .6deg 51.42deg);pointer-events:none;z-index:1}
.store-roulette-sector-label{position:absolute;z-index:2;left:var(--sector-x);top:var(--sector-y);width:30%;transform:translate(-50%,-50%) rotate(var(--sector-angle));transform-origin:center;display:block;color:#fff;font:800 .67rem/1.05 Rajdhani,sans-serif;text-align:center;text-shadow:0 2px 4px rgba(0,0,0,.88);white-space:normal;pointer-events:none;user-select:none}
.store-roulette-wheel-center{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:70px;height:70px;border-radius:50%;display:grid;place-items:center;background:#0b0528;border:4px solid rgba(255,255,255,.17);color:var(--cyan);font:900 1.4rem Rajdhani,sans-serif;box-shadow:0 7px 22px rgba(0,0,0,.45);z-index:6;pointer-events:none}
.store-roulette-result{margin:10px 0 14px;padding:13px;border-radius:15px;border:1px solid rgba(255,255,255,.12);display:grid;gap:4px}
.store-roulette-result[hidden]{display:none!important}
.store-roulette-result strong{font-size:1rem}.store-roulette-result span,.store-roulette-result small{color:var(--muted);line-height:1.3}.store-roulette-result.is-win{border-color:rgba(52,211,153,.38);background:rgba(16,185,129,.08)}.store-roulette-result.is-win strong{color:#4ade80}.store-roulette-result.is-none{border-color:rgba(251,146,60,.32);background:rgba(249,115,22,.06)}.store-roulette-spin{width:100%;min-height:52px}
@keyframes gtRouletteFade{from{opacity:0}to{opacity:1}}@keyframes gtRouletteFadeOut{to{opacity:0}}
@media(max-width:430px){.store-roulette-reward{padding:22px 14px 16px;border-radius:22px}.store-roulette-reward h2{font-size:1.42rem}.store-roulette-wheel-shell{width:min(70vw,270px)}.store-roulette-wheel-center{width:60px;height:60px}.store-roulette-sector-label{font-size:.59rem;width:31%}}

/* 27.1.132 · La vista previa administrativa y la ruleta del cliente comparten el mismo tema claro. */
:root[data-theme="light"] .store-roulette-reward-overlay{
  background:rgba(46,38,64,.42);
  backdrop-filter:blur(9px);
}
:root[data-theme="light"] .store-roulette-reward{
  border-color:rgba(22,220,244,.32);
  background:
    radial-gradient(circle at 90% 8%,rgba(236,72,153,.12),transparent 34%),
    radial-gradient(circle at 8% 94%,rgba(22,220,244,.10),transparent 34%),
    linear-gradient(155deg,rgba(255,255,255,.995),rgba(246,242,255,.99) 72%);
  box-shadow:0 28px 78px rgba(52,38,78,.24),0 0 0 1px rgba(255,255,255,.72) inset;
}
:root[data-theme="light"] .store-roulette-close{
  border-color:rgba(78,62,112,.14);
  background:rgba(255,255,255,.86);
  color:#21172f;
  box-shadow:0 9px 24px rgba(54,38,82,.10);
}
:root[data-theme="light"] .store-roulette-kicker{color:#08bfd7}
:root[data-theme="light"] .store-roulette-reward h2{color:#21172f}
:root[data-theme="light"] .store-roulette-reward>p{color:#71677f}
:root[data-theme="light"] .store-roulette-wheel-shell{
  background:rgba(85,67,120,.055);
  box-shadow:0 0 0 1px rgba(72,54,104,.08),0 16px 38px rgba(56,39,88,.10),0 0 32px rgba(22,220,244,.08);
}
:root[data-theme="light"] .store-roulette-result{
  color:#251a34;
  border-color:rgba(73,55,105,.14);
  background:rgba(255,255,255,.78);
  box-shadow:0 10px 28px rgba(54,38,82,.07);
}
:root[data-theme="light"] .store-roulette-result span,
:root[data-theme="light"] .store-roulette-result small{color:#746a82}
:root[data-theme="light"] .store-roulette-result.is-win{
  border-color:rgba(16,185,129,.30);
  background:rgba(16,185,129,.08);
}
:root[data-theme="light"] .store-roulette-result.is-win strong{color:#059669}
:root[data-theme="light"] .store-roulette-result.is-none{
  border-color:rgba(249,115,22,.24);
  background:rgba(249,115,22,.065);
}
:root[data-theme="light"] .store-roulette-spin{
  box-shadow:0 12px 28px rgba(22,190,218,.14);
}