/* ==========================================================================
   Raffle Draw Machine — big-screen slot draw
   ========================================================================== */
.rdm{
  --rdm-bg:#0d0f0c;
  --rdm-bg-2:#161a14;
  --rdm-gold:#ffd76a;
  --rdm-amber:#f5c518;
  --rdm-green:#193014;
  --rdm-ink:#101110;
  --rdm-line:#2a2f27;
  --rdm-dim:#8d9188;
  --rdm-font:"Figtree",system-ui,-apple-system,"Segoe UI",sans-serif;
  /* Starting value only — the script measures the stage and sets this so a
     full ticket code spans the screen without going full screen first. */
  --rdm-cell:clamp(72px,15vw,200px);
  font-family:var(--rdm-font);
  color:#fff;
  margin:0 auto;
}
.rdm *{box-sizing:border-box}

/* Break out of a narrow theme/Elementor container so the stage runs the full
   width of the page. Add fullwidth="no" to the shortcode to keep it contained. */
.rdm-bleed .rdm-stage{
  width:100vw;
  max-width:100vw;
  margin-left:calc(50% - 50vw);
  border-left:0;border-right:0;border-radius:0;
}

/* ---- stage ---- */
.rdm-stage{
  position:relative;
  background:radial-gradient(120% 100% at 50% 0%, var(--rdm-bg-2) 0%, var(--rdm-bg) 70%);
  border:1px solid var(--rdm-line);
  border-radius:20px;
  padding:clamp(24px,4vw,56px) clamp(18px,3vw,56px);
  overflow:hidden;
  text-align:center;
}
.rdm-stage::after{
  /* soft vignette so the digits pop on a bright pub TV */
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(90% 70% at 50% 45%, transparent 40%, rgba(0,0,0,.55) 100%);
}
.rdm-stage-inner{position:relative;z-index:1;width:100%}

.rdm-heading{
  margin:0 0 clamp(14px,2.5vw,28px);
  font-size:clamp(13px,1.6vw,20px);
  font-weight:600;
  letter-spacing:.32em;
  text-transform:uppercase;
  color:var(--rdm-dim);
}

/* ---- reels ---- */
.rdm-reels{
  display:flex;
  justify-content:center;
  align-items:center;
  gap:calc(var(--rdm-cell) * .09);
  min-height:var(--rdm-cell);
}
.rdm-idle{
  display:flex;align-items:center;justify-content:center;
  min-height:var(--rdm-cell);
  font-size:clamp(20px,3vw,34px);
  font-weight:700;
  color:#41473d;
  letter-spacing:.06em;
  line-height:1;
}
.rdm-reel{
  position:relative;
  height:var(--rdm-cell);
  width:calc(var(--rdm-cell) * .78); /* keep in step with W_RATIO in rdm.js */
  overflow:hidden;
  background:linear-gradient(180deg,#000 0%,#1c211a 45%,#000 100%);
  border:2px solid #333a2f;
  border-radius:12px;
  box-shadow:inset 0 10px 24px rgba(0,0,0,.85), inset 0 -10px 24px rgba(0,0,0,.85);
}
.rdm-reel::after{
  /* glass highlight across the middle */
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(255,255,255,.10) 0%,transparent 35%,transparent 65%,rgba(255,255,255,.05) 100%);
}
.rdm-strip{will-change:transform;margin:0;padding:0}
.rdm-cell{
  /* Centre the character with the box itself, and null out the text metrics a
     theme might otherwise inherit into it — indent, letter-spacing and word
     spacing all shift a single glyph visibly once the box is TV-sized. */
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  height:var(--rdm-cell);
  margin:0;
  padding:0;
  line-height:1;
  text-indent:0;
  letter-spacing:0;
  word-spacing:0;
  direction:ltr;
  font-size:calc(var(--rdm-cell) * .6);
  font-weight:900;
  color:var(--rdm-amber);
  text-shadow:0 0 18px rgba(245,197,24,.45);
  font-variant-numeric:tabular-nums;
}
.rdm-reel.is-spinning .rdm-strip{filter:blur(2px)}
.rdm-reel.is-settling .rdm-strip{filter:blur(.6px)}
.rdm-reel.is-locked{
  border-color:var(--rdm-amber);
  box-shadow:inset 0 10px 24px rgba(0,0,0,.8), 0 0 26px rgba(245,197,24,.35);
  animation:rdm-pop .28s ease-out;
}
@keyframes rdm-pop{0%{transform:scale(1)}40%{transform:scale(1.07)}100%{transform:scale(1)}}

/* ---- winner name ---- */
.rdm-name{
  margin:clamp(18px,3vw,36px) 0 0;
  min-height:1.2em;
  font-size:clamp(22px,4.2vw,56px);
  font-weight:800;
  letter-spacing:-.02em;
  color:#fff;
  opacity:0;
  transform:translateY(14px);
  transition:opacity .5s ease, transform .5s ease;
}
.rdm-name.is-shown{opacity:1;transform:none}

/* ---- controls (managers only) ---- */
.rdm-controls{
  max-width:1400px;
  margin:18px auto 0;
  background:#fff;
  color:#17161a;
  border:1px solid #e6e4e1;
  border-radius:16px;
  padding:18px 20px;
}
.rdm-row{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}
.rdm-row-sub{margin-top:14px;padding-top:14px;border-top:1px solid #eeecea;align-items:flex-start}
.rdm-status strong{display:block;font-size:16px;font-weight:700;letter-spacing:-.01em}
.rdm-muted{color:#6b6b80;font-size:13.5px}
.rdm-actions{display:flex;gap:10px;align-items:center}

.rdm-btn{
  display:inline-block;border:1px solid #17161a;background:#17161a;color:#fff;
  border-radius:12px;padding:11px 20px;font-family:var(--rdm-font);font-size:14px;font-weight:700;
  cursor:pointer;line-height:1.2;transition:filter .15s,opacity .15s;
}
.rdm-btn:hover{filter:brightness(1.15)}
.rdm-btn-ghost{background:#fff;color:#17161a;border-color:#d9d6d2;font-weight:600}
.rdm-btn-ghost:hover{border-color:#17161a;filter:none}
.rdm-btn-draw{background:var(--rdm-amber);border-color:var(--rdm-amber);color:#1a1500;letter-spacing:.12em;padding:12px 30px}
.rdm-btn-draw:hover{filter:brightness(1.06)}
.rdm-btn[disabled]{opacity:.45;cursor:not-allowed;filter:none}

.rdm-msg{margin:10px 0 0;font-size:13.5px;color:#0f6a41;min-height:1.2em}
.rdm-msg.is-error{color:#b3261e}

.rdm-winners{display:flex;flex-wrap:wrap;gap:8px;align-items:center;flex:1;min-width:200px}
.rdm-winners-label{font-size:12.5px;color:#6b6b80;text-transform:uppercase;letter-spacing:.06em}
.rdm-chip{background:#f4f3f1;border:1px solid #e6e4e1;border-radius:999px;padding:5px 12px;font-size:13px}
.rdm-chip b{font-weight:700;letter-spacing:.04em}

.rdm-sub-actions{display:flex;gap:14px;align-items:center;white-space:nowrap}
.rdm-link{background:none;border:0;padding:0;cursor:pointer;color:#6b6b80;font-family:var(--rdm-font);font-size:13px;text-decoration:underline}
.rdm-link:hover{color:#17161a}
.rdm-hint{margin:12px 0 0;font-size:12.5px;color:#8d8a85}

/* ---- full screen ---- */
.rdm-fs{
  position:absolute;top:14px;right:14px;z-index:2;
  width:38px;height:38px;border-radius:10px;cursor:pointer;
  background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.18);
  color:#fff;font-size:17px;line-height:1;
  opacity:.35;transition:opacity .2s;
}
.rdm-stage:hover .rdm-fs{opacity:1}
/* The script puts .rdm-is-fs on the stage when it goes full screen. Styling off
   a class rather than :fullscreen keeps every rule below in one list: a browser
   that doesn't know a selector throws away the whole rule it appears in, and
   Safari still spells it :-webkit-full-screen. The two bare rules underneath
   are the fallback if the script never runs. */
.rdm-stage.rdm-is-fs,
.rdm-stage:fullscreen{
  display:flex;align-items:center;justify-content:center;
  width:100vw;max-width:100vw;margin-left:0;
  border:0;border-radius:0;padding:4vh 2vw;
  /* --rdm-cell is left to the script, which re-fits on fullscreenchange. */
}
.rdm-stage:-webkit-full-screen{
  display:flex;align-items:center;justify-content:center;
  width:100vw;max-width:100vw;margin-left:0;
  border:0;border-radius:0;padding:4vh 2vw;
}
.rdm-stage.rdm-is-fs .rdm-heading{font-size:clamp(16px,2vh,26px)}
.rdm-stage.rdm-is-fs .rdm-name{font-size:clamp(32px,7vh,90px)}

/* ==========================================================================
   Artwork background
   The supplied artwork carries its own heading, mascot and WINNER wordmark, so
   the stage steps back: no heading of its own, no vignette, and the boxes
   become outlines so the artwork shows through. Measured off the artwork, the
   skyline ends at 26% of the height and the wordmark starts at 72%, so the
   reels and the name are placed inside that clear band.
   ========================================================================== */
.rdm-stage.rdm-has-bg.rdm-bg-always,
.rdm-stage.rdm-has-bg.rdm-is-fs{
  background-image:var(--rdm-bg-img);
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
  background-color:#173013; /* the artwork's own field, for odd screen shapes */
}
.rdm-stage.rdm-has-bg.rdm-bg-always::after,
.rdm-stage.rdm-has-bg.rdm-is-fs::after{display:none}
.rdm-stage.rdm-has-bg.rdm-bg-always .rdm-heading,
.rdm-stage.rdm-has-bg.rdm-is-fs .rdm-heading{display:none}

.rdm-has-bg.rdm-bg-always .rdm-reel,
.rdm-has-bg.rdm-is-fs .rdm-reel{
  background:none;
  border-color:var(--rdm-amber);
  box-shadow:none;
}
.rdm-has-bg.rdm-bg-always .rdm-reel::after,
.rdm-has-bg.rdm-is-fs .rdm-reel::after{display:none}
.rdm-has-bg.rdm-bg-always .rdm-reel.is-locked,
.rdm-has-bg.rdm-is-fs .rdm-reel.is-locked{
  box-shadow:0 0 30px rgba(245,197,24,.3);
}

/* Sit the draw in the clear band between the skyline and the wordmark. */
.rdm-stage.rdm-has-bg.rdm-bg-always,
.rdm-stage.rdm-has-bg.rdm-is-fs{padding:27vh 2vw 28vh}
.rdm-stage.rdm-has-bg.rdm-bg-always .rdm-name,
.rdm-stage.rdm-has-bg.rdm-is-fs .rdm-name{
  margin-top:2.2vh;
  font-size:clamp(20px,4.6vh,64px);
}

@media (max-width:640px){
  .rdm-row{flex-direction:column;align-items:stretch}
  .rdm-actions{justify-content:space-between}
}

@media (prefers-reduced-motion:reduce){
  .rdm-reel.is-locked{animation:none}
  .rdm-name{transition:none}
}

/* ---- linked raffle controls ---- */
.rdm-row-source{align-items:center}
.rdm-source{display:flex;align-items:center;gap:10px;flex:1;min-width:260px}
.rdm-source label{font-size:12.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:#6b6b80}
.rdm-source select{
  flex:1;max-width:460px;font-family:var(--rdm-font);font-size:14px;
  padding:10px 12px;border:1px solid #d9d6d2;border-radius:10px;background:#fff;color:#17161a;
}
.rdm-source-note{margin:0;font-size:12.5px;color:#8d8a85;text-align:right;flex:1;min-width:200px}
.rdm-row-prize{margin-top:14px;padding-top:14px;border-top:1px solid #eeecea}