:root{
  /* ====== Light casino palette ====== */
  --bg0:#f6f7ff;
  --bg1:#ffffff;

  --card:rgba(255,255,255,.88);
  --stroke:rgba(0,0,0,.08);

  --text:#121422;
  --muted:rgba(18,20,34,.62);

  --neon:#6b4eff;
  --neon2:#00c2ff;

  --good:#14c784;
  --bad:#ff3d6e;

  --shadow: 0 18px 55px rgba(20,22,34,.12);
  --shadow2: 0 28px 80px rgba(20,22,34,.14);
}

*{ box-sizing:border-box; }

body{
  margin:0;
  background:
    radial-gradient(900px 520px at 15% 0%, rgba(107,78,255,.24), transparent 60%),
    radial-gradient(900px 520px at 85% 0%, rgba(0,194,255,.18), transparent 60%),
    radial-gradient(800px 480px at 50% 90%, rgba(20,199,132,.10), transparent 62%),
    linear-gradient(180deg, var(--bg0), var(--bg1));
  color: var(--text);
}

.tmwl_app{
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  min-height: 100vh;
}

/* =========================
   Topbar
   ========================= */
.tmwl_topbar, .tmwl_live_header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:18px 22px;
  border-bottom:1px solid var(--stroke);
  background: linear-gradient(180deg, rgba(255,255,255,.16), rgba(255,255,255,.06));
  backdrop-filter: blur(12px);
}

.tmwl_brand{display:flex;gap:12px;align-items:center;}
.tmwl_dot{
  width:14px;height:14px;border-radius:999px;
  background: radial-gradient(circle at 30% 30%, #fff, var(--neon));
  box-shadow:0 0 22px rgba(107,78,255,.55);
}
.tmwl_brand_title{font-weight:900;letter-spacing:.12em;font-size:12px}
.tmwl_brand_sub{font-size:12px;color:var(--muted);margin-top:2px}

.tmwl_link{
  color: var(--text);
  text-decoration:none;
  opacity:.75;
  margin-left:14px;
}
.tmwl_link:hover{opacity:1;text-decoration:underline}

/* =========================
   Grid
   ========================= */
.tmwl_grid{
  display:grid;
  grid-template-columns: 360px 1fr 360px;
  gap:16px;
  padding:16px;
}
@media (max-width: 1200px){
  .tmwl_grid{grid-template-columns:1fr; }
}

/* =========================
   Panels
   ========================= */
.tmwl_panel{
  background: var(--card);
  border:1px solid var(--stroke);
  border-radius:16px;
  padding:16px;
  box-shadow: var(--shadow);
}

.tmwl_panel_title{
  font-weight:900;
  letter-spacing:.08em;
  font-size:12px;
  opacity:.92;
  margin-bottom:14px;
}

.tmwl_label{
  display:block;
  font-size:12px;
  color:var(--muted);
  margin:10px 0 6px;
}

.tmwl_input{
  width:100%;
  padding:11px 12px;
  border-radius:12px;
  border:1px solid rgba(0,0,0,.10);
  background: rgba(255,255,255,.96);
  color: var(--text);
  outline:none;
}
.tmwl_input:focus{
  border-color: rgba(107,78,255,.55);
  box-shadow: 0 0 0 3px rgba(107,78,255,.16);
}

.tmwl_row{display:flex;gap:10px;margin-top:14px}

.tmwl_btn{
  padding:10px 12px;
  border-radius:12px;
  border:1px solid rgba(0,0,0,.10);
  background: rgba(255,255,255,.92);
  color: var(--text);
  cursor:pointer;
  font-weight:800;
}
.tmwl_btn:hover{background: rgba(255,255,255,1)}
.tmwl_btn:disabled{opacity:.42;cursor:not-allowed}

.tmwl_btn_primary{
  border-color: rgba(107,78,255,.35);
  background: linear-gradient(135deg, rgba(107,78,255,.34), rgba(0,194,255,.20));
  box-shadow: 0 14px 34px rgba(107,78,255,.14);
}
.tmwl_btn_big{padding:14px 20px;font-size:16px;letter-spacing:.08em}

.tmwl_kpi{
  margin-top:14px;
  padding:12px;
  border-radius:14px;
  background:rgba(255,255,255,.90);
  border:1px solid rgba(0,0,0,.10)
}
.tmwl_kpi_big{font-size:18px;font-weight:1000}
.tmwl_kpi_sub{color:var(--muted);font-size:12px;margin-top:6px}

.tmwl_hint{margin-top:12px;font-size:12px;color:var(--muted);line-height:1.4}

/* =========================
   Wheel block
   ========================= */
.tmwl_wheelwrap{
  background: var(--card);
  border:1px solid var(--stroke);
  border-radius:16px;
  padding:16px;
  box-shadow: var(--shadow2);
}

.tmwl_wheel_header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom:12px;
}
.tmwl_wheel_title{font-size:14px;font-weight:1000;letter-spacing:.10em}
.tmwl_wheel_sub{display:none}

.tmwl_wheel_stage, .tmwl_live_stage{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:16px;
  overflow: visible; /* IMPORTANT: pointer must not be clipped */
}

/* extra glow behind the wheel */
.tmwl_wheel_stage::before{
  content:"";
  position:absolute;
  width:min(680px, 92vw);
  aspect-ratio:1/1;
  border-radius:999px;
  background:
    radial-gradient(circle at 50% 50%, rgba(107,78,255,.18), transparent 58%),
    radial-gradient(circle at 35% 35%, rgba(0,194,255,.14), transparent 55%),
    radial-gradient(circle at 65% 65%, rgba(20,199,132,.10), transparent 55%);
  filter: blur(2px);
  z-index:0;
}

canvas{
  position:relative;
  z-index:1;
  border-radius:999px;
  background:
    radial-gradient(circle at 30% 30%, rgba(255,255,255,.99), rgba(238,244,255,.98));
  border:none;
  box-shadow:
    0 28px 80px rgba(20,22,34,.16),
    0 0 0 10px rgba(255,255,255,.60) inset,
    0 0 0 2px rgba(107,78,255,.12) inset;
}

/* =========================
   Pointer (real wheel style)
   Nose ALWAYS down + tick animation
   ========================= */
.tmwl_pointer{
  position:absolute;
  left:50%;
  top:-14px;                 /* adjust if needed */
  transform: translateX(-50%);
  width:44px;
  height:64px;
  z-index:6;
  pointer-events:none;
  filter: drop-shadow(0 14px 28px rgba(20,22,34,.22));
  transform-origin: 50% 14px; /* pivot point (like a hinge) */
}

/* hinge circle */
.tmwl_pointer i{
  display:none; /* (kept if template had <i>, but we don't rely on it) */
}

/* circle */
.tmwl_pointer::before{
  content:"";
  position:absolute;
  left:50%;
  top:0;
  transform: translateX(-50%);
  width:16px;
  height:16px;
  border-radius:999px;
  background: rgba(255,255,255,.98);
  box-shadow: 0 10px 22px rgba(20,22,34,.16);
}

/* main triangle — NOSE DOWN */
.tmwl_pointer::after{
  content:"";
  position:absolute;
  left:50%;
  top:12px;
  transform: translateX(-50%);
  width:0;height:0;
  border-left:18px solid transparent;
  border-right:18px solid transparent;
  border-top:34px solid rgba(255,255,255,.98); /* nose DOWN */
  filter: drop-shadow(0 0 12px rgba(107,78,255,.10));
}

/* inner neon insert (extra triangle) */
.tmwl_pointer span{
  display:none; /* not used; safe if exists in DOM */
}

/* Add inner neon triangle using background layer */
.tmwl_pointer{
  background:
    radial-gradient(circle at 50% 10px, rgba(107,78,255,.0), rgba(107,78,255,0));
}
.tmwl_pointer::after{
  /* keep main white triangle */
}

/* Neon inner triangle using an additional pseudo element via box-shadow trick */
.tmwl_pointer{
  /* nothing */
}
.tmwl_pointer::after{
  /* white triangle already */
}
.tmwl_pointer_neon{
  display:none;
}

/* Tick animation */
.tmwl_pointer_tick{
  animation: tmwl_pointer_tick .12s ease-out 1;
}
@keyframes tmwl_pointer_tick{
  0%   { transform: translateX(-50%) rotate(0deg) translateY(0); }
  45%  { transform: translateX(-50%) rotate(-10deg) translateY(1px); }
  100% { transform: translateX(-50%) rotate(0deg) translateY(0); }
}

/* =========================
   TURBO MODE (continuous spin)
   ========================= */
@keyframes tmwlTurboSpin{
  from{ transform: rotate(0deg); }
  to{ transform: rotate(360deg); }
}

/* Hint the browser for smoother rotation */
#wheelCanvas{ will-change: transform; transform-origin: 50% 50%; }

/* Small neon triangle drawn as overlay using an extra element if you have it.
   If you don't have it in HTML — ignore. */
.tmwl_pointer .tmwl_pointer_neon_inner{
  position:absolute;
  left:50%;
  top:22px;
  transform: translateX(-50%);
  width:0;height:0;
  border-left:8px solid transparent;
  border-right:8px solid transparent;
  border-top:14px solid rgba(107,78,255,.95);
  filter: drop-shadow(0 0 12px rgba(107,78,255,.35));
}

/* =========================
   Result toast
   ========================= */
.tmwl_result{
  position:absolute;
  bottom:12px;
  padding:12px 14px;
  border-radius:16px;
  background: rgba(255,255,255,.92);
  border:1px solid rgba(0,0,0,.08);
  box-shadow: 0 14px 38px rgba(20,22,34,.14);
  backdrop-filter: blur(10px);
  max-width: 85%;
  text-align:center;
  z-index: 8;
}
.tmwl_result_label{
  font-weight:1000;
  font-size:16px;
  letter-spacing:.06em;
  text-transform:uppercase;
}

/* =========================
   History
   ========================= */
.tmwl_history{
  max-height:520px;
  overflow:auto;
  display:flex;
  flex-direction:column;
  gap:10px;
  padding-right:4px;
}
.tmwl_hist_item{
  padding:10px 12px;
  border-radius:14px;
  border:1px solid rgba(0,0,0,.08);
  background: rgba(255,255,255,.92);
}
.tmwl_hist_item b{letter-spacing:.06em}
.tmwl_badge{
  display:inline-block;
  margin-left:8px;
  padding:2px 8px;
  border-radius:999px;
  font-size:11px;
  font-weight:1000;
}
.tmwl_badge_win{
  background:rgba(88,255,176,.16);
  border:1px solid rgba(20,199,132,.28);
  color:var(--good)
}
.tmwl_badge_lose{
  background:rgba(255,90,122,.14);
  border:1px solid rgba(255,61,110,.30);
  color:var(--bad)
}

/* =========================
   Live (legacy – can stay harmless)
   ========================= */
.tmwl_live_stage{padding:22px}

.tmwl_live_result{
  position:absolute; left:22px; bottom:22px;
  padding:12px 14px;
  border-radius:16px;
  background: rgba(0,0,0,.60);
  border:1px solid rgba(255,255,255,.14);
  backdrop-filter: blur(10px);
}
.tmwl_live_result_tag{font-size:11px;letter-spacing:.14em;color:var(--muted);font-weight:900}
.tmwl_live_result_label{font-size:22px;font-weight:1000;letter-spacing:.08em;margin-top:6px;text-transform:uppercase}

.tmwl_live_spins{
  position:absolute; right:22px; top:22px;
  width:320px;
  background: rgba(0,0,0,.40);
  border:1px solid rgba(255,255,255,.12);
  border-radius:16px;
  padding:12px;
  backdrop-filter: blur(10px);
}
.tmwl_live_spins_title{font-size:11px;font-weight:900;letter-spacing:.14em;color:var(--muted);margin-bottom:10px}
.tmwl_live_spins_list{display:flex;flex-direction:column;gap:10px;max-height:640px;overflow:auto}
.tmwl_live_spins_item{
  padding:10px 12px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.06);
}

/* =========================
   Progressive Jackpot bar
   ========================= */
.tmwl_jackpot{
  width: min(560px, 92vw);
  margin: 0 auto 16px auto;
  padding: 14px 16px;
  border-radius: 18px;
  background: linear-gradient(135deg, rgba(255,255,255,.94), rgba(245,248,255,.94));
  border: 1px solid var(--stroke);
  box-shadow: var(--shadow2);
  text-align:center;
  backdrop-filter: blur(12px);
}

.tmwl_jackpot_title{
  font-weight: 1000;
  letter-spacing: .14em;
  font-size: 12px;
  color: var(--neon);
  text-transform: uppercase;
  margin-bottom: 10px;
}

.tmwl_jackpot_bar{
  height: 14px;
  border-radius: 999px;
  background: rgba(107,78,255,.10);
  overflow: hidden;
  border: 1px solid rgba(0,0,0,.06);
}

.tmwl_jackpot_fill{
  height: 100%;
  width: 0%;
  border-radius: 999px;
  background: linear-gradient(
    90deg,
    rgba(107,78,255,1),
    rgba(0,194,255,1),
    rgba(20,199,132,1),
    rgba(255,209,61,1)
  );
  box-shadow: 0 0 22px rgba(107,78,255,.38);
  transition: width 1.05s cubic-bezier(.22,1,.36,1);
}

.tmwl_jackpot_amount{
  margin-top: 10px;
  font-size: 26px;
  font-weight: 1000;
  color: #12131d;
  text-shadow: 0 0 18px rgba(107,78,255,.18);
}

.tmwl_jackpot_top{ margin-bottom: 12px; }

/* Confetti overlay */
.tmwl_confetti{
  position:absolute;
  inset:0;
  pointer-events:none;
  z-index:7;
}

.tmwl_check{display:flex;align-items:center;gap:8px;margin:10px 0 0 0;font-size:13px;opacity:.9}
.tmwl_check input{transform:scale(1.1)}


/* Reason banner (host) */
.tmwl_reason_banner{
  max-width: 1180px;
  margin: 10px auto 0;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid rgba(255, 0, 0, .20);
  background: rgba(255, 0, 0, .06);
  color: #8a0000;
  font-weight: 700;
  letter-spacing: .2px;
}


/* =========================================================
   CASINO RED THEME (BIG WIN style) — scoped to .tmwl_casino
   Keeps your logic; replaces look & layout only
   ========================================================= */
.tmwl_casino{
  min-height: 100vh;
}

/* Override background for casino page only */
body:has(.tmwl_casino){
  background:
    radial-gradient(1100px 800px at 72% 8%, rgba(255, 165, 50, .22), transparent 58%),
    radial-gradient(1000px 740px at 18% 20%, rgba(255, 40, 80, .20), transparent 60%),
    radial-gradient(1100px 860px at 60% 90%, rgba(255, 220, 120, .16), transparent 62%),
    linear-gradient(180deg, #2a0710 0%, #16050a 55%, #090307 100%) !important;
  color: rgba(255,255,255,.92);
}

/* header */
.tmwl_casino_header{
  border-bottom: 1px solid rgba(255,255,255,.08) !important;
  background: linear-gradient(180deg, rgba(0,0,0,.25), rgba(0,0,0,.05)) !important;
}
body:has(.tmwl_casino) .tmwl_brand_title{ color: rgba(255,255,255,.92); }
body:has(.tmwl_casino) .tmwl_brand_sub{ color: rgba(255,255,255,.60); }
body:has(.tmwl_casino) .tmwl_dot{
  background: radial-gradient(circle at 30% 30%, #fff, #ffcc55);
  box-shadow: 0 0 24px rgba(255,190,80,.55);
}

/* Layout */
.tmwl_casino_layout{
  max-width: 1280px;
  margin: 0 auto;
  padding: 18px 16px 28px;
  display: grid;
  grid-template-columns: 380px 1fr;
  gap: 18px;
  align-items: start;
}
@media (max-width: 1050px){
  .tmwl_casino_layout{ grid-template-columns: 1fr; }
}

.tmwl_casino_left{
  display: grid;
  gap: 16px;
}
.tmwl_casino_right{
  display: grid;
  gap: 16px;
}

/* Cards */
body:has(.tmwl_casino) .tmwl_panel{
  background: rgba(255,255,255,.10) !important;
  border: 1px solid rgba(255,255,255,.12) !important;
  box-shadow: 0 22px 70px rgba(0,0,0,.35) !important;
  backdrop-filter: blur(14px) saturate(135%);
}
body:has(.tmwl_casino) .tmwl_panel_title{
  color: rgba(255,255,255,.75);
  letter-spacing: .18em;
}
body:has(.tmwl_casino) .tmwl_label{ color: rgba(255,255,255,.70); }
body:has(.tmwl_casino) .tmwl_input{
  background: rgba(0,0,0,.25);
  border: 1px solid rgba(255,255,255,.14);
  color: rgba(255,255,255,.92);
}
body:has(.tmwl_casino) .tmwl_input::placeholder{ color: rgba(255,255,255,.45); }
body:has(.tmwl_casino) .tmwl_input:focus{
  border-color: rgba(255, 204, 85, .55);
  box-shadow: 0 0 0 3px rgba(255, 204, 85, .18);
}
body:has(.tmwl_casino) .tmwl_btn_primary{
  border-color: rgba(255, 204, 85, .45);
  background: linear-gradient(135deg, rgba(255, 204, 85, .38), rgba(255, 90, 140, .22));
  box-shadow: 0 18px 48px rgba(255, 204, 85, .12);
  color: rgba(10,8,12,.92);
}
body:has(.tmwl_casino) .tmwl_hint{ color: rgba(255,255,255,.68); }

/* BIG WIN marquee */
.tmwl_marquee{
  position: relative;
  border-radius: 22px;
  padding: 18px 18px 16px;
  overflow: hidden;
  background: linear-gradient(135deg, rgba(255, 204, 85, .18), rgba(255, 40, 80, .12));
  border: 1px solid rgba(255,255,255,.12);
  box-shadow: 0 30px 85px rgba(0,0,0,.40);
}

/* Casino bulbs around marquee (multi-color + animated) */
.tmwl_marquee:before{
  content:"";
  position:absolute;
  inset:10px;
  border-radius: 16px;
  background:
    radial-gradient(circle, rgba(255,220,140,1) 0 45%, rgba(255,220,140,0) 50%) 0 0/26px 26px;
  filter: drop-shadow(0 0 10px rgba(255,220,140,.60));
  mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  padding: 10px;
  box-sizing: border-box;
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: .95;
  animation: tmwl-marquee-bulbs 2.4s linear infinite;
}
/* soft glow layer behind bulbs */
.tmwl_marquee:after{
  content:"";
  position:absolute;
  inset:0;
  border-radius: 22px;
  background:
    radial-gradient(900px 260px at 18% 0%, rgba(255, 220, 140, .20), transparent 60%),
    radial-gradient(900px 260px at 82% 0%, rgba(255, 90, 140, .16), transparent 60%);
  opacity: .85;
  pointer-events:none;
}

@keyframes tmwl-marquee-bulbs{
  0%{ filter: drop-shadow(0 0 10px rgba(255,220,140,.60)) hue-rotate(0deg) brightness(1.05); opacity:.95; }
  50%{ filter: drop-shadow(0 0 16px rgba(255,220,140,.82)) hue-rotate(160deg) brightness(1.35); opacity:.78; }
  100%{ filter: drop-shadow(0 0 10px rgba(255,220,140,.60)) hue-rotate(360deg) brightness(1.10); opacity:.95; }
}

/* keep legacy keyframes name used elsewhere */
@keyframes tmwl-bulbs{ 50%{ opacity:.70; filter: drop-shadow(0 0 14px rgba(255,220,140,.75)); } }

.tmwl_marquee_inner{ position: relative; z-index: 1; }
.tmwl_marquee_title{
  font-weight: 1000;
  font-size: 56px;
  line-height: .92;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: rgba(255, 220, 140, .98);
  text-shadow:
    0 2px 0 rgba(0,0,0,.25),
    0 0 18px rgba(255, 210, 120, .45),
    0 0 44px rgba(255, 160, 70, .22);
}
.tmwl_marquee_title span{
  color: rgba(255, 235, 190, .98);
}
.tmwl_marquee_sub{
  margin-top: 10px;
  font-size: 14px;
  color: rgba(255,255,255,.70);
  letter-spacing: .10em;
  text-transform: uppercase;
}

/* Jackpot */
.tmwl_jackpot_card{
  padding: 16px 18px;
}
.tmwl_jackpot_top{
  display:flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
}
.tmwl_jackpot_value{
  font-weight: 1000;
  font-size: 26px;
  letter-spacing: .06em;
  color: rgba(255, 235, 190, .98);
  background: linear-gradient(90deg, rgba(255, 235, 190, 1), rgba(255, 204, 85, 1), rgba(255, 90, 140, .95));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow:
    0 0 14px rgba(255, 215, 120, .28),
    0 0 34px rgba(255, 160, 70, .18);
  animation: tmwl-jackpot-glow 3.2s ease-in-out infinite;
}

@keyframes tmwl-jackpot-glow{
  0%,100%{ filter: brightness(1.0); }
  50%{ filter: brightness(1.25); }
}
.tmwl_jackpot_bar{
  margin-top: 12px;
  height: 10px;
  border-radius: 999px;
  background: rgba(255,255,255,.10);
  border: 1px solid rgba(255,255,255,.10);
  overflow: hidden;
}
.tmwl_jackpot_fill{
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(255,204,85,.75), rgba(255,90,140,.50));
  box-shadow: 0 0 22px rgba(255, 204, 85, .18);
  position: relative;
}

/* subtle shimmer sweep over the bar */
.tmwl_jackpot_fill:after{
  content:"";
  position:absolute;
  inset:-20% -40%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.18), transparent);
  transform: translateX(-60%) rotate(12deg);
  animation: tmwl-jackpot-shimmer 2.8s linear infinite;
  opacity: .65;
  pointer-events:none;
}

@keyframes tmwl-jackpot-shimmer{
  to { transform: translateX(60%) rotate(12deg); }
}

/* Spins list */
.tmwl_spins_list{
  display: grid;
  gap: 10px;
}
.tmwl_spins_empty{
  color: rgba(255,255,255,.55);
  font-size: 13px;
}
.tmwl_spin_item{
  display:flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.18);
}
.tmwl_spin_item .tmwl_spin_email{
  font-size: 12px;
  color: rgba(255,255,255,.65);
  max-width: 62%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.tmwl_spin_item .tmwl_spin_label{
  font-weight: 900;
  letter-spacing: .06em;
  font-size: 12px;
  text-transform: uppercase;
  color: rgba(255,255,255,.90);
}

/* v2.2: prize-choice buttons (shown on WIN) */
.tmwl_spin_choices{
  margin-top: 8px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.tmwl_spin_choice_btn{
  appearance: none;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.08);
  color: rgba(255,255,255,.92);
  padding: 7px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .02em;
  cursor: pointer;
  transition: transform .12s ease, background .12s ease, border-color .12s ease, opacity .12s ease;
}
.tmwl_spin_choice_btn:hover{ transform: translateY(-1px); background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.20); }
.tmwl_spin_choice_btn:active{ transform: translateY(0px) scale(.98); }
.tmwl_spin_choice_btn:disabled{ opacity: .55; cursor: not-allowed; }
.tmwl_spin_badge{
  font-weight: 1000;
  font-size: 10px;
  letter-spacing: .18em;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.16);
  background: rgba(255,255,255,.08);
}
.tmwl_spin_badge.win{
  color: rgba(20,10,12,.95);
  background: rgba(255, 220, 140, .92);
  border-color: rgba(255, 220, 140, .55);
}
.tmwl_spin_badge.lose{
  color: rgba(255,255,255,.78);
  background: rgba(255,255,255,.08);
}

/* Wheel card + gold rim + bulbs */
.tmwl_casino_wheelcard{
  position: relative;
  border-radius: 26px;
  padding: 18px;
  background: radial-gradient(circle at 40% 20%, rgba(255, 220, 140, .10), rgba(0,0,0,.18) 55%, rgba(0,0,0,.25));
  border: 1px solid rgba(255,255,255,.12);
  box-shadow: 0 40px 110px rgba(0,0,0,.45);
  overflow: visible;
  display: grid;
  place-items: center;
}

/* remove outer decorative rim/circle around the wheel (user requested) */
.tmwl_casino_wheelcard:before{ display:none !important; }

/* rim bulbs ON the wheel edge (per sector). Syncs with wheel rotation via --wheel-rot, and uses --tmwl-step set by JS */

/* ===== Rim bulbs (round casino dots per sector) ===== */
.tmwl_bulbs{
  position:absolute;
  left:50%; top:50%;
  width: min(740px, 88vw);
  aspect-ratio: 1/1;
  transform: translate(-50%,-50%) rotate(var(--wheel-rot, 0deg));
  border-radius: 999px;
  z-index: 25;
  pointer-events:none;

  /* per-sector step comes from JS: --tmwl-step: 360/n deg */
  --step: var(--tmwl-step, 15deg);

  /* ON bulbs + OFF bulbs (so it looks like real marquee) */
  background:
    repeating-conic-gradient(
      from -90deg,
      rgba(255, 220, 140, .18) 0 calc(var(--step) - 2.2deg),
      rgba(255, 220, 140, 1) calc(var(--step) - 2.2deg) var(--step)
    );

  /* keep only a thin ring at the wheel edge */
  -webkit-mask: radial-gradient(circle, transparent 70.8%, #000 72.2%, #000 74.2%, transparent 75.6%);
  mask: radial-gradient(circle, transparent 70.8%, #000 72.2%, #000 74.2%, transparent 75.6%);

  /* make slices look like dots */
  filter:
    drop-shadow(0 0 6px rgba(255, 210, 120, .55))
    drop-shadow(0 0 16px rgba(255, 140, 40, .25));
  opacity: .98;
}

/* rounded “bulb caps” feel */
.tmwl_bulbs::before{
  content:"";
  position:absolute; inset:0;
  border-radius:999px;
  background:
    repeating-conic-gradient(
      from -90deg,
      transparent 0 calc(var(--step) - 2.2deg),
      rgba(255,255,255,.95) calc(var(--step) - 1.15deg) calc(var(--step) - 0.25deg),
      transparent calc(var(--step) - 0.25deg) var(--step)
    );
  -webkit-mask: radial-gradient(circle, transparent 70.6%, #000 72.0%, #000 74.4%, transparent 75.8%);
  mask: radial-gradient(circle, transparent 70.6%, #000 72.0%, #000 74.4%, transparent 75.8%);
  filter: blur(.15px);
  opacity: .85;
}

/* chasing highlight (casino “running” bulbs) */
.tmwl_bulbs::after{
  content:"";
  position:absolute; inset:0;
  border-radius:999px;
  background:
    conic-gradient(
      from -90deg,
      transparent 0 330deg,
      rgba(255,210,80,0) 330deg 342deg,
      rgba(255,210,80,.85) 342deg 350deg,
      rgba(255,80,200,.85) 350deg 358deg,
      transparent 358deg 360deg
    );
  -webkit-mask: radial-gradient(circle, transparent 70.8%, #000 72.2%, #000 74.2%, transparent 75.6%);
  mask: radial-gradient(circle, transparent 70.8%, #000 72.2%, #000 74.2%, transparent 75.6%);
  animation: tmwlBulbChase 900ms linear infinite, tmwlBulbHue 2.4s linear infinite;
  filter: drop-shadow(0 0 12px rgba(255,190,60,.55));
  opacity: .9;
}

@keyframes tmwlBulbChase{
  to { transform: rotate(360deg); }
}
@keyframes tmwlBulbHue{
  to { filter: hue-rotate(360deg) drop-shadow(0 0 12px rgba(255,190,60,.55)); }
}


/* chasing segment over rim bulbs */
.tmwl_bulbs::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius:999px;
  transform: rotate(0deg);
  background:
    conic-gradient(
      from -90deg,
      transparent 0 332deg,
      rgba(255,220,120,0) 332deg 344deg,
      rgba(255,220,120,.95) 344deg 352deg,
      rgba(255,80,200,.85) 352deg 358deg,
      transparent 358deg 360deg
    );
  -webkit-mask: radial-gradient(circle, transparent 0 92.2%, #000 93.2% 99.4%, transparent 100%);
  mask: radial-gradient(circle, transparent 0 92.2%, #000 93.2% 99.4%, transparent 100%);
  filter: drop-shadow(0 0 12px rgba(255,190,60,.55));
  animation: tmwl-bulbs-chase 950ms linear infinite;
}

@keyframes tmwl-bulbs-rotate{
  from{ transform: rotate(0deg); }
  to{ transform: rotate(360deg); }
}

/* extra sparkle (subtle) */
.tmwl_bulbs:after{
  content:"";
  position:absolute;
  inset:0;
  border-radius:999px;
  background:
    radial-gradient(circle at 25% 18%, rgba(255,255,255,.22), transparent 40%),
    radial-gradient(circle at 72% 78%, rgba(255,220,140,.16), transparent 44%);
  opacity:.75;
  filter: blur(6px);
  animation: tmwl-wheel-sparkle 3.6s ease-in-out infinite;
}

@keyframes tmwl-rim-hue{
  0%{ filter: drop-shadow(0 0 8px rgba(255,220,140,.52)) hue-rotate(0deg) brightness(1.06); }
  50%{ filter: drop-shadow(0 0 16px rgba(255,220,140,.78)) hue-rotate(170deg) brightness(1.35); }
  100%{ filter: drop-shadow(0 0 8px rgba(255,220,140,.52)) hue-rotate(360deg) brightness(1.10); }
}

@keyframes tmwl-bulbs-chase{ to{ transform: rotate(360deg); } }

@keyframes tmwl-wheel-sparkle{
  0%,100%{ transform: rotate(0deg); opacity:.62; }
  50%{ transform: rotate(16deg); opacity:.95; }
}

/* canvas sizing */
.tmwl_casino_wheelcard canvas{
  position: relative;
  z-index: 2;
  width: min(720px, 86vw);
  height: auto;
}

/* pointer top center */
.tmwl_pointer_casino{
  position:absolute;
  top: 8px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10;
}

/* result overlay */
.tmwl_result_casino{
  position: absolute;
  left: 50%;
  bottom: 14px;
  transform: translateX(-50%);
  z-index: 12;
  width: min(620px, 90%);
  padding: 14px 16px;
  border-radius: 18px;
  background: rgba(0,0,0,.45);
  border: 1px solid rgba(255,255,255,.14);
  backdrop-filter: blur(10px);
  box-shadow: 0 22px 70px rgba(0,0,0,.40);
}

/* Hub overlay adapts */
.tmwl_hub{
  position: absolute;
  left: 50%;
  top: 50%;
  width: 140px;
  height: 140px;
  transform: translate(-50%, -50%);
  z-index: 6;
  pointer-events: none;
}
.tmwl_hub__ring{
  position: absolute; inset: -10px;
  border-radius: 999px;
  background:
    conic-gradient(from 0deg,
      rgba(255,220,140,.0),
      rgba(255,220,140,.75),
      rgba(255,90,140,.50),
      rgba(255,220,140,.70),
      rgba(255,220,140,.0)
    );
  filter: blur(1px);
  opacity: .90;
  animation: tmwl-hub-spin 2.6s linear infinite;
}
.tmwl_hub__core{
  position: absolute; inset: 0;
  border-radius: 999px;
  background: radial-gradient(circle at 35% 28%, rgba(255,255,255,.55), rgba(255,255,255,.18) 45%, rgba(0,0,0,.20) 85%);
  border: 1px solid rgba(255,255,255,.14);
  box-shadow:
    0 18px 40px rgba(0,0,0,.35),
    inset 0 1px 0 rgba(255,255,255,.18);
  backdrop-filter: blur(10px);
  display: grid;
  place-items: center;
  overflow: hidden;
}
.tmwl_hub__icon{
  width: 62px;
  height: 62px;
  color: rgba(255, 220, 140, .92);
  filter: drop-shadow(0 10px 18px rgba(255, 210, 120, .18));
  animation: tmwl-hub-float 1.8s ease-in-out infinite;
}
.tmwl_hub__text{
  margin-top: 6px;
  font-size: 11px;
  font-weight: 1000;
  letter-spacing: .28em;
  color: rgba(255,255,255,.70);
  text-transform: uppercase;
}
.tmwl_hub__shine{
  position: absolute;
  inset: -35%;
  border-radius: 999px;
  background:
    radial-gradient(circle at 30% 20%, rgba(255,255,255,.35), transparent 45%),
    radial-gradient(circle at 70% 80%, rgba(255,220,140,.18), transparent 55%);
  filter: blur(10px);
  opacity: .85;
  animation: tmwl-hub-shine 3.4s ease-in-out infinite;
  pointer-events: none;
}
@keyframes tmwl-hub-spin{ to { transform: rotate(360deg); } }
@keyframes tmwl-hub-float{ 0%,100%{ transform: translateY(0) scale(1);} 50%{ transform: translateY(-3px) scale(1.02);} }
@keyframes tmwl-hub-shine{ 0%,100%{ transform: rotate(0deg); opacity:.80;} 50%{ transform: rotate(16deg); opacity:1;} }

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  .tmwl_marquee:before, .tmwl_bulbs, .tmwl_hub__ring, .tmwl_hub__icon, .tmwl_hub__shine{ animation: none !important; }
}


/* =========================
   Pointer tick animation (hits each sector lamp / divider)
   ========================= */
.tmwl_pointer.tmwl_pointer_tick{
  animation: tmwlPointerTick 140ms ease-out;
}

@keyframes tmwlPointerTick{
  0%   { transform: translateX(-50%) rotate(0deg); }
  40%  { transform: translateX(-50%) rotate(18deg); }
  100% { transform: translateX(-50%) rotate(0deg); }
}


/* =========================
   Claim row (under PLAYER SPINS title)
   ========================= */
.tmwl_claim_wrap{
  margin: 10px 0 12px;
  padding: 10px 10px 12px;
  border-radius: 14px;
  background: rgba(0,0,0,.18);
  border: 1px solid rgba(255,255,255,.08);
}
.tmwl_claim_title{
  font-weight: 900;
  letter-spacing: .12em;
  text-transform: uppercase;
  font-size: 12px;
  color: rgba(255,255,255,.86);
  margin: 0 0 10px;
}
.tmwl_claim_row{
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.tmwl_claim_btn{
  appearance: none;
  border: 1px solid rgba(255,255,255,.16);
  background: rgba(0,0,0,.18);
  color: rgba(255,255,255,.92);
  border-radius: 999px;
  padding: 7px 12px;
  font-weight: 800;
  font-size: 12px;
  cursor: pointer;
  transition: transform .12s ease, opacity .12s ease, filter .12s ease;
}
.tmwl_claim_btn:hover{ transform: translateY(-1px); filter: brightness(1.05); }
.tmwl_claim_btn:active{ transform: translateY(0px) scale(.98); }
.tmwl_claim_btn[disabled]{
  opacity: .45;
  cursor: not-allowed;
  filter: none;
  transform: none;
}