/* Ruletka (port of the Daily Reward Roulette from hvh.tools): reel stage, tiles, win modal */
.rl { --rl-card-w: 200px; --rl-card-h: 176px; --rl-gap: 14px; }
.rl .rl-head p { margin: 6px 0 0; color: var(--muted); }

/* hero stats */
.rl-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin: 18px 0 22px; }
.rl-stat { padding: 16px 18px; border-radius: 14px; border: 1px solid var(--border-soft); background: var(--card); box-shadow: var(--shadow); }
.rl-stat span { display: block; font-size: .7rem; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.rl-stat b { display: block; margin-top: 6px; font: 700 1.45rem "Rajdhani", "Poppins", sans-serif; letter-spacing: .02em; }
.rl-stat b.ready { color: var(--green); } .rl-stat b.bonus { color: #fbbf24; } .rl-stat b.used, .rl-stat b.muted { color: var(--muted); }
.rl-note { margin: 0 0 18px; padding: 12px 16px; border-radius: 12px; border: 1px solid rgba(251, 191, 36, .35); background: rgba(251, 191, 36, .08); color: #fde68a; font-size: .88rem; }

/* stage */
.rl-stage { padding: 22px 22px 24px; }
.rl-viewport { position: relative; height: calc(var(--rl-card-h) + 2.75rem); overflow: hidden; border-radius: 16px; border: 1px solid var(--border);
  background: radial-gradient(120% 90% at 50% 0%, rgba(34, 211, 238, .07) 0%, transparent 55%), rgba(6, 10, 18, .92);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06), inset 0 -24px 48px -24px rgba(0, 0, 0, .85), 0 0 48px -24px rgba(34, 211, 238, .22);
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 8%, #000 92%, transparent 100%); mask-image: linear-gradient(90deg, transparent 0%, #000 8%, #000 92%, transparent 100%); }
.rl-viewport::before, .rl-viewport::after { content: ""; position: absolute; top: 0; bottom: 0; width: 3.5rem; z-index: 15; pointer-events: none; }
.rl-viewport::before { left: 0; background: linear-gradient(90deg, rgba(3, 5, 10, .95), transparent); }
.rl-viewport::after { right: 0; background: linear-gradient(270deg, rgba(3, 5, 10, .95), transparent); }
.rl-marker { position: absolute; left: 50%; top: .85rem; bottom: .85rem; width: 3px; transform: translateX(-50%); z-index: 20; border-radius: 999px;
  background: linear-gradient(180deg, rgba(34, 211, 238, .15) 0%, rgba(34, 211, 238, .95) 35%, rgba(255, 255, 255, .85) 50%, rgba(217, 70, 239, .9) 65%, rgba(217, 70, 239, .15) 100%);
  box-shadow: 0 0 18px rgba(34, 211, 238, .55), 0 0 32px rgba(217, 70, 239, .35); }
.rl-marker::before, .rl-marker::after { content: ""; position: absolute; left: 50%; width: 14px; height: 14px; transform: translateX(-50%); border: 2px solid rgba(34, 211, 238, .75); border-bottom: none; border-radius: 4px 4px 0 0; }
.rl-marker::before { top: -2px; }
.rl-marker::after { bottom: -2px; transform: translateX(-50%) rotate(180deg); border-color: rgba(217, 70, 239, .75); }
.rl-strip { position: relative; display: flex; align-items: center; height: 100%; gap: var(--rl-gap); padding: 1.35rem 0; will-change: transform; }
.rl-strip.spinning { filter: blur(.4px); }

/* tiles */
.rl-tile { --ac: #22d3ee; --acr: 34, 211, 238; position: relative; flex: none; width: var(--rl-card-w); min-width: var(--rl-card-w); height: var(--rl-card-h); overflow: hidden; border-radius: 14px;
  border: 1px solid rgba(var(--acr), .42); background: radial-gradient(110% 85% at 50% 0%, rgba(var(--acr), .22) 0%, transparent 62%), rgba(0, 0, 0, .38);
  box-shadow: 0 0 28px rgba(var(--acr), .16); }
.rl-tile.win { z-index: 2; box-shadow: 0 0 44px rgba(var(--acr), .6); outline: 2px solid rgba(var(--acr), .9); outline-offset: -2px; }
.rl-tile-art { position: absolute; inset: 0 0 2.3rem; display: grid; place-items: center; }
.rl-tile-ic { width: 84px; height: 84px; display: grid; place-items: center; border-radius: 50%; color: var(--ac);
  background: radial-gradient(circle at 50% 35%, rgba(var(--acr), .32), rgba(var(--acr), .06) 70%); box-shadow: inset 0 0 0 1px rgba(var(--acr), .4), 0 12px 24px -10px rgba(var(--acr), .7); }
.rl-tile-ic svg { width: 44px; height: 44px; filter: drop-shadow(0 6px 10px rgba(0, 0, 0, .45)); }
.rl-tile-rar { position: absolute; top: 8px; right: 8px; z-index: 3; padding: 2px 8px; border-radius: 6px; border: 1px solid rgba(var(--acr), .4); background: rgba(0, 0, 0, .7);
  font-size: 9px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--ac); }
.rl-tile-cap { position: absolute; left: 0; right: 0; bottom: 0; z-index: 3; padding: 1.7rem .55rem .55rem; background: linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, .72) 38%, rgba(0, 0, 0, .92) 100%); }
.rl-tile-cap p { margin: 0; text-align: center; font: 600 11px/1.35 ui-monospace, "JetBrains Mono", monospace; letter-spacing: .02em; text-transform: uppercase; color: rgba(255, 255, 255, .92); }

/* controls */
.rl-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 22px; align-items: center; }
.rl-actions .btn { min-height: 48px; }
.rl-actions .btn[disabled] { opacity: .5; cursor: not-allowed; transform: none; }
.rl-hint { margin: 12px 0 0; font-size: .78rem; color: var(--muted); }
.rl-err { margin: 14px 0 0; color: #fda4af; font-size: .9rem; }

/* lists */
.rl-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.rl-odds { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.rl-odds li { display: grid; grid-template-columns: 12px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 9px 12px; border-radius: 10px; border: 1px solid var(--border-soft); background: rgba(255, 255, 255, .025); font-size: .9rem; }
.rl-odds i { width: 10px; height: 10px; border-radius: 50%; background: var(--ac, #22d3ee); box-shadow: 0 0 10px var(--ac, #22d3ee); }
.rl-odds .pct { color: var(--muted); font: 600 .82rem ui-monospace, monospace; }
.rl-odds .rar { margin-left: 8px; font-size: .62rem; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.rl-limits { margin: 14px 0 0; font-size: .78rem; color: var(--muted); line-height: 1.55; }
.rl-histcard { padding: 0; overflow: hidden; }
.rl-histcard > h3 { margin: 0; padding: 16px 22px; font: 600 .74rem ui-monospace, "JetBrains Mono", monospace; letter-spacing: .16em; text-transform: uppercase; color: var(--accent); border-bottom: 1px solid var(--border-soft); }
.rl-hist { list-style: none; margin: 0; padding: 16px 18px 18px; max-height: 440px; overflow-y: auto; display: grid; gap: 10px; scrollbar-width: thin; scrollbar-color: rgba(34, 211, 238, .4) transparent; }
.rl-hist::-webkit-scrollbar { width: 6px; } .rl-hist::-webkit-scrollbar-thumb { background: rgba(34, 211, 238, .4); border-radius: 6px; }
.rl-hist .empty { padding: 14px; color: var(--muted); font-size: .88rem; }
.rl-h { --ac: #22d3ee; --acr: 34, 211, 238; display: grid; grid-template-columns: 58px minmax(0, 1fr); gap: 14px; align-items: center; padding: 10px 14px; border-radius: 14px;
  border: 1px solid rgba(var(--acr), .3); background: linear-gradient(135deg, rgba(var(--acr), .07), transparent 60%), rgba(255, 255, 255, .015); }
.rl-h-ic { width: 54px; height: 54px; display: grid; place-items: center; border-radius: 12px; color: var(--ac); border: 1px solid rgba(var(--acr), .42);
  background: radial-gradient(circle at 50% 30%, rgba(var(--acr), .28), rgba(var(--acr), .05) 75%); box-shadow: 0 8px 18px -10px rgba(var(--acr), .7); }
.rl-h-ic svg { width: 26px; height: 26px; }
.rl-h-tx b { display: block; font: 700 1rem ui-monospace, "JetBrains Mono", monospace; letter-spacing: .01em; color: #fff; }
.rl-h-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 7px; }
.rl-pill { padding: 2px 10px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, .2); font: 700 .62rem ui-monospace, monospace; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.rl-pill.alt { border-color: rgba(34, 211, 238, .42); color: var(--accent); background: rgba(34, 211, 238, .08); }
.rl-h-meta time { color: var(--muted); font: .74rem ui-monospace, monospace; }
.rl-h.none { border-color: var(--border-soft); background: rgba(255, 255, 255, .015); }
.rl-h.none .rl-h-ic { color: var(--muted); border-color: var(--border-soft); background: rgba(255, 255, 255, .03); box-shadow: none; }
.rl-h.none .rl-h-tx b { color: var(--muted); }
/* win modal */
.rl-modal { position: fixed; inset: 0; z-index: 120; display: grid; place-items: center; padding: 1rem; }
.rl-modal[hidden] { display: none; }
.rl-backdrop { position: absolute; inset: 0; background: rgba(2, 4, 10, .86); backdrop-filter: blur(14px); cursor: pointer; }
.rl-card { --ac: #22d3ee; --acr: 34, 211, 238; position: relative; z-index: 1; width: min(100%, 24rem); overflow: hidden; border-radius: 1.1rem; border: 1px solid rgba(var(--acr), .4);
  background: radial-gradient(120% 90% at 50% -30%, rgba(var(--acr), .18) 0%, transparent 58%), linear-gradient(165deg, rgba(10, 16, 28, .98), rgba(4, 6, 12, .99));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .07), 0 0 56px -18px rgba(var(--acr), .5), 0 28px 72px -28px rgba(0, 0, 0, .92); animation: rl-in .42s cubic-bezier(.22, 1, .36, 1) both; }
.rl-card-in { padding: 1.5rem 1.4rem 1.35rem; text-align: center; }
.rl-eyebrow { display: inline-flex; margin: 0 auto .7rem; padding: .2rem .6rem; border-radius: 999px; border: 1px solid rgba(var(--acr), .38); background: rgba(var(--acr), .1);
  font-size: 10px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--ac); }
.rl-card h3 { margin: 0; font: 700 clamp(1.3rem, 4vw, 1.6rem)/1.2 "Rajdhani", "Poppins", sans-serif; color: #fff; }
.rl-card p.sub { margin: .55rem auto 0; max-width: 20rem; font-size: .9rem; line-height: 1.5; color: rgba(255, 255, 255, .68); }
.rl-art { position: relative; margin: 1.1rem auto 0; max-width: 14rem; padding: 1.4rem 0; border-radius: 1rem; border: 1px solid rgba(var(--acr), .38);
  background: radial-gradient(90% 70% at 50% 0%, rgba(var(--acr), .2) 0%, transparent 60%), rgba(0, 0, 0, .45); box-shadow: 0 0 48px -12px rgba(var(--acr), .55); }
.rl-art .rl-tile-ic { width: 96px; height: 96px; margin: 0 auto; } .rl-art .rl-tile-ic svg { width: 52px; height: 52px; }
.rl-art .rar { position: absolute; top: .5rem; right: .5rem; padding: .15rem .5rem; border-radius: .45rem; border: 1px solid rgba(var(--acr), .45); background: rgba(0, 0, 0, .72);
  font-size: 9px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--ac); }
.rl-card .btn { margin-top: 1.2rem; width: 100%; }
@keyframes rl-in { from { opacity: 0; transform: translateY(10px) scale(.97); } to { opacity: 1; transform: translateY(0) scale(1); } }

@media (max-width: 820px) { .rl-grid { grid-template-columns: 1fr; } .rl-stats { grid-template-columns: 1fr; } .rl-stage { padding: 16px 12px 18px; } }
@media (prefers-reduced-motion: reduce) { .rl-card { animation: none; } .rl-strip.spinning { filter: none; } }

/* top-menu pill (same look as the RULETKA button on hvh.tools) */
.nav a.nav-roulette { border: 1px solid rgba(34, 211, 238, .45); background: rgba(34, 211, 238, .07); color: #fff; font-weight: 700; letter-spacing: .04em; }
.nav a.nav-roulette svg { width: 15px; height: 15px; color: var(--accent); }
.nav a.nav-roulette:hover { background: rgba(34, 211, 238, .16); border-color: rgba(34, 211, 238, .75); }
.nav a.nav-roulette.on { background: rgba(34, 211, 238, .16); }
/* possible prizes (no odds shown) */
.rl-pintro { margin: 0; padding: 16px 22px 4px; color: var(--accent); font: .86rem ui-monospace, "JetBrains Mono", monospace; line-height: 1.5; }
.rl-pgrid { list-style: none; margin: 0; padding: 14px 18px 18px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.rl-p { --ac: #22d3ee; --acr: 34, 211, 238; display: grid; grid-template-columns: 58px minmax(0, 1fr); gap: 14px; align-items: center; padding: 10px 14px; border-radius: 14px;
  border: 1px solid rgba(var(--acr), .4); background: linear-gradient(135deg, rgba(var(--acr), .1), transparent 62%), rgba(255, 255, 255, .015); }
.rl-p .rl-h-ic { width: 54px; height: 54px; }
.rl-p b { display: block; font: 700 1rem ui-monospace, "JetBrains Mono", monospace; color: #fff; }
.rl-p .rl-pill { display: inline-block; margin-top: 7px; border-color: rgba(var(--acr), .5); color: var(--ac); }
.rl-p.none { border-color: var(--border-soft); background: rgba(255, 255, 255, .015); }
.rl-p.none b { color: var(--muted); } .rl-p.none .rl-h-ic { color: var(--muted); border-color: var(--border-soft); background: rgba(255, 255, 255, .03); box-shadow: none; } .rl-p.none .rl-pill { border-color: rgba(255, 255, 255, .2); color: var(--muted); }
@media (max-width: 700px) { .rl-pgrid { grid-template-columns: 1fr; } }
.rl-lock { margin: 14px 0 0; padding: 10px 14px; border-radius: 10px; border: 1px solid rgba(251, 191, 36, .35); background: rgba(251, 191, 36, .08); color: #fde68a; font-size: .85rem; line-height: 1.5; }
.rl-lock[hidden] { display: none; }
/* prizes and history side by side */
.rl-two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; align-items: stretch; }
.rl-two > .card { margin-bottom: 0; }
.rl-two .rl-pgrid { grid-template-columns: 1fr; }
@media (min-width: 901px) {
  /* the history list scrolls inside its card and never makes the row taller than the prizes card */
  .rl-two > .rl-histcard:last-child { position: relative; min-height: 320px; }
  .rl-two > .rl-histcard:last-child .rl-hist { position: absolute; left: 0; right: 0; top: 52px; bottom: 0; max-height: none; }
}
@media (max-width: 900px) { .rl-two { grid-template-columns: 1fr; } }
.rl-actions [hidden] { display: none !important; }   /* .btn sets display, which would otherwise override [hidden] */