/* ═════════════════════════════════════════════════════════════════
   RULETA DE LA FORTUNA · caseta de feria, de noche
   ─────────────────────────────────────────────────────────────────
   La tragamonedas es un taller: latón caliente sobre negro.
   Esto es lo contrario: intemperie fría, verde de lona mojada,
   madera basta y una guirnalda de bombillas que es la única luz.
   Con los ojos entrecerrados se ve una caseta, no una tarjeta.
   ════════════════════════════════════════════════════════════════ */

body.escena-ruleta{
  --lona:#1d6b52;          /* verde de la lona */
  --madera:#6b4d2c;
  --bomb:#ffd9a0;          /* filamento */
  --noche:#0a1a1e;
}

/* ── la noche de la feria ───────────────────────────────────────── */
body.escena-ruleta .escena-fondo{
  opacity:1;
  background:
    /* halo de la guirnalda sobre la caseta */
    radial-gradient(ellipse 46% 26% at 50% 16%, rgba(255,201,138,.13), transparent 68%),
    /* suelo de tierra mojada */
    radial-gradient(ellipse 130% 42% at 50% 104%, rgba(24,40,38,.85), transparent 62%),
    linear-gradient(180deg, #060f12 0%, #0a1a1e 40%, #071113 78%, #04090a 100%);
}
/* niebla baja: dos franjas muy tenues, nada de cristal esmerilado */
body.escena-ruleta .escena-fondo::after{
  content:'';position:absolute;inset:0;opacity:.55;
  background:
    linear-gradient(180deg, transparent 62%, rgba(160,200,196,.045) 74%, transparent 84%),
    linear-gradient(180deg, transparent 78%, rgba(160,200,196,.03) 88%, transparent 96%);
}

/* ── la caseta ──────────────────────────────────────────────────── */
#p-ruleta .feria{
  position:relative;width:min(420px,100%);margin:0 auto;
  display:flex;flex-direction:column;align-items:center;
}

/* toldo a rayas, con faldón recortado */
#p-ruleta .toldo{
  position:relative;width:calc(100% + 40px);height:26px;flex:none;
  border-radius:6px 6px 0 0;
  background:repeating-linear-gradient(90deg,
    #1d6b52 0 22px, #d8cfae 22px 44px);
  box-shadow:inset 0 -8px 12px rgba(0,0,0,.45), 0 6px 16px rgba(0,0,0,.5);
}
#p-ruleta .toldo .faldon{
  position:absolute;left:0;right:0;top:26px;height:12px;
  background:repeating-linear-gradient(90deg,
    #1d6b52 0 22px, #d8cfae 22px 44px);
  -webkit-mask:radial-gradient(circle 11px at 11px 0, transparent 10px, #000 11px) repeat-x;
  mask:radial-gradient(circle 11px at 11px 0, transparent 10px, #000 11px) repeat-x;
  -webkit-mask-size:22px 12px;mask-size:22px 12px;
  filter:brightness(.82);
}

/* guirnalda: bombillas de verdad, apagadas casi siempre */
#p-ruleta .guirnalda{
  display:flex;justify-content:space-between;align-items:flex-start;
  width:calc(100% + 24px);margin-top:16px;padding:0 6px;flex:none;
  border-top:1px solid rgba(200,180,140,.22);
}
#p-ruleta .guirnalda i{
  width:7px;height:9px;border-radius:0 0 50% 50%/0 0 60% 60%;
  background:#4b4536;border-top:2px solid #6d6350;
  transition:background .18s ease, box-shadow .18s ease;
}
#p-ruleta .guirnalda i:nth-child(odd){margin-top:3px}
#p-ruleta.gana  .guirnalda i,
#p-ruleta.gordo .guirnalda i{
  background:var(--bomb);box-shadow:0 0 7px rgba(255,201,138,.65);
}
#p-ruleta.gordo .guirnalda i{animation:rlFila .28s steps(2) infinite}
#p-ruleta.gordo .guirnalda i:nth-child(even){animation-delay:.14s}
@keyframes rlFila{0%{background:var(--bomb)}50%{background:#4b4536;box-shadow:none}}

/* ── la rueda colgada del brazo ─────────────────────────────────── */
#p-ruleta .rueda{
  position:relative;margin-top:6px;line-height:0;
}
#p-ruleta #cvRuleta{display:block;margin:0 auto;filter:drop-shadow(0 14px 22px rgba(0,0,0,.6))}

/* poste y tirante: la rueda está montada en algo */
#p-ruleta .poste{
  position:relative;width:26px;height:26px;flex:none;margin-top:-6px;
  background:linear-gradient(90deg,#3a2917,#6b4d2c 44%,#2a1d10);
  border-radius:0 0 3px 3px;
  box-shadow:0 8px 18px rgba(0,0,0,.6);
}
#p-ruleta .poste .tirante{
  position:absolute;left:50%;top:-2px;width:120px;height:2px;
  transform:translateX(-50%);
  background:linear-gradient(90deg,transparent,rgba(120,96,58,.75),transparent);
}

/* ── mostrador de madera ────────────────────────────────────────── */
#p-ruleta .mostrador{
  width:100%;margin-top:10px;padding:10px 12px 12px;flex:none;
  border-radius:5px;
  background:
    repeating-linear-gradient(90deg, rgba(0,0,0,.13) 0 1px, transparent 1px 34px),
    linear-gradient(180deg,#4a361f 0%,#33240f 60%,#241a0d 100%);
  border:1px solid #5b431f;border-bottom-color:#1a1208;
  box-shadow:inset 0 1px 0 rgba(255,225,180,.10), 0 10px 24px rgba(0,0,0,.55);
  display:flex;flex-direction:column;align-items:center;gap:10px;
}
#p-ruleta .apuesta{margin:0;gap:6px;justify-content:center;flex-wrap:wrap}
#p-ruleta .apuesta .lab{color:#b39a6d;margin-right:4px}
#p-ruleta .chip{
  height:30px;min-width:48px;border-radius:3px;
  background:#241a0d;border:1px solid #5b431f;color:#c6ac7c;
  font-size:12px}
#p-ruleta .chip:hover{background:#2f2211;border-color:#7a5b2b;color:#e2cfa4}
#p-ruleta .chip.on{background:#1d6b52;border-color:#2f9673;color:#eafff4}

/* ── el gesto: empujar ──────────────────────────────────────────── */
#p-ruleta .agarre{
  position:relative;width:100%;max-width:280px;height:46px;
  cursor:pointer;padding:0;border-radius:4px;
  font-family:inherit;
  background:linear-gradient(180deg,#7a5a30 0%,#5a4022 52%,#3d2a13 100%);
  border:1px solid #8d6a37;border-bottom:1px solid #241705;
  box-shadow:0 4px 0 #241705, 0 10px 18px rgba(0,0,0,.55);
  transition:transform .07s linear, box-shadow .07s linear;
}
#p-ruleta .agarre .cuerda{
  position:absolute;left:8px;right:8px;top:7px;height:5px;border-radius:3px;
  background:repeating-linear-gradient(115deg,
    rgba(232,206,150,.30) 0 3px, rgba(60,40,18,.42) 3px 7px);
}
#p-ruleta .agarre .rotulo{
  display:block;padding-top:9px;
  font-family:var(--mono);font-size:12px;font-weight:600;letter-spacing:.20em;
  color:#f3e2bd;text-transform:uppercase;
}
#p-ruleta .agarre:active:not(:disabled){
  transform:translateY(4px);box-shadow:0 0 0 #241705, 0 4px 10px rgba(0,0,0,.5);
}
#p-ruleta .agarre:disabled{cursor:default;filter:saturate(.5) brightness(.72)}

/* ── el veredicto, clavado en la tabla ──────────────────────────── */
#p-ruleta .res{
  margin-top:12px;min-height:40px;text-align:center;
  font-family:var(--mono);font-variant-numeric:tabular-nums;
}
#p-ruleta .res .big{font-size:20px;letter-spacing:.04em}
#p-ruleta .res .small{color:#93a8a6;font-size:11.5px;letter-spacing:.02em}

/* ── que quepa siempre, incluso en los 543px de Discord ─────────── */
@media(max-height:620px){
  #p-ruleta .feria{width:min(340px,100%)}
  #p-ruleta .toldo{height:18px}
  #p-ruleta .toldo .faldon{top:18px;height:9px}
  #p-ruleta .guirnalda{margin-top:10px}
  #p-ruleta .mostrador{margin-top:6px;padding:8px 10px 10px;gap:7px}
  #p-ruleta .agarre{height:40px}
  #p-ruleta .agarre .rotulo{padding-top:7px;font-size:11px}
  #p-ruleta .res{margin-top:8px;min-height:32px}
  #p-ruleta .res .big{font-size:17px}
}
@media(max-height:500px){
  #p-ruleta .toldo,#p-ruleta .guirnalda{display:none}
  #p-ruleta .chip{height:26px;min-width:42px}
}