/* عجلة الحظ (اللوبي وتطبيق تلغرام) — ألوانها ثابتة غامقة */
.lw-bg { position: fixed; inset: 0; z-index: 1000; background: rgba(4, 2, 12, .72); display: flex; align-items: center; justify-content: center; padding: 12px;
  font-family: 'IBM Plex Sans Arabic', system-ui, sans-serif; }
.lw { width: min(440px, 100%); max-height: calc(100vh - 24px); overflow: auto; background: linear-gradient(180deg, #241640, #120b24); color: #f3eefe;
  border: 1px solid rgba(245, 184, 61, .35); border-radius: 20px; box-shadow: 0 20px 60px rgba(0, 0, 0, .55); }
.lw-head { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; border-bottom: 1px solid rgba(255, 255, 255, .08); font-size: 17px; }
.lw-x { border: 0; background: rgba(255, 255, 255, .08); color: inherit; width: 32px; height: 32px; border-radius: 10px; cursor: pointer; font-size: 15px; }
.lw-body { padding: 14px 16px 18px; }
.lw-wheel-wrap { position: relative; width: min(300px, 78vw); margin: 4px auto 6px; aspect-ratio: 1; }
.lw-wheel { width: 100%; height: 100%; border-radius: 50%; box-shadow: 0 0 0 6px #f5b83d, 0 0 0 10px #7a4d0e, 0 0 30px rgba(245, 184, 61, .45); }
.lw-svg { width: 100%; height: 100%; display: block; }
.lw-pointer { position: absolute; top: -14px; left: 50%; transform: translateX(-50%); z-index: 2; width: 0; height: 0;
  border-left: 15px solid transparent; border-right: 15px solid transparent; border-top: 30px solid #ff3d5a; filter: drop-shadow(0 3px 3px rgba(0, 0, 0, .5)); }
.lw-result { min-height: 26px; text-align: center; margin: 8px 0 6px; font-size: 15px; }
.lw-win { color: #ffd76a; }
.lw-go { display: block; width: 100%; height: 50px; border: 0; border-radius: 14px; font: 700 17px inherit; font-family: inherit; cursor: pointer; color: #2b1600;
  background: linear-gradient(180deg, #ffd76a, #f59e1b); box-shadow: 0 6px 18px rgba(245, 158, 27, .35); }
.lw-go:disabled { cursor: default; background: #3b3150; color: #a99cc4; box-shadow: none; }
.lw-rule { font-size: 12.5px; color: #b8acd6; text-align: center; margin: 8px 0 12px; line-height: 1.6; }
.lw-free { background: rgba(49, 196, 107, .12); border: 1px solid rgba(49, 196, 107, .35); border-radius: 12px; padding: 10px 12px; font-size: 13px; line-height: 1.8; margin-bottom: 12px; }
.lw h4 { margin: 6px 0 8px; font-size: 14px; color: #ffd76a; }
.lw-tks { display: grid; gap: 10px; }
.lw-tk-h { display: flex; justify-content: space-between; font-size: 13.5px; }
.lw-bar { height: 8px; border-radius: 6px; background: rgba(255, 255, 255, .1); overflow: hidden; margin: 4px 0 2px; }
.lw-bar i { display: block; height: 100%; background: linear-gradient(90deg, #f59e1b, #ffd76a); border-radius: 6px; }
.lw-tk small { color: #a99cc4; font-size: 11.5px; }
.lw-num { direction: ltr; unicode-bidi: isolate; font-variant-numeric: tabular-nums; }
.lw-draw { font-size: 13px; color: #cfc4ec; margin: 12px 0 0; }
.lw-odds { margin-top: 12px; font-size: 12.5px; color: #b8acd6; }
.lw-odds summary { cursor: pointer; }
.lw-odds div { display: flex; justify-content: space-between; padding: 3px 0; border-bottom: 1px dashed rgba(255, 255, 255, .08); }
.lw-err { padding: 20px; color: #ff8b9b; }
.lw-load { display: grid; place-content: center; height: 200px; }
.lw-spinner { width: 34px; height: 34px; border-radius: 50%; border: 3px solid rgba(255, 255, 255, .15); border-top-color: #ffd76a; animation: lwsp .8s linear infinite; }
@keyframes lwsp { to { transform: rotate(360deg); } }

/* نقاط الولاء (نفس النافذة) */
.ly-level { display: flex; align-items: center; gap: 14px; padding: 14px; border-radius: 16px; margin-bottom: 12px;
  background: linear-gradient(135deg, color-mix(in srgb, var(--c) 30%, transparent), rgba(255, 255, 255, .04)); border: 1px solid color-mix(in srgb, var(--c) 55%, transparent); }
.ly-ic { font-size: 40px; line-height: 1; filter: drop-shadow(0 4px 8px rgba(0, 0, 0, .4)); }
.ly-level div { display: grid; gap: 2px; }
.ly-level b { font-size: 22px; color: var(--c); }
.ly-level small { font-size: 12px; color: #b8acd6; }
.ly-prog { margin-bottom: 12px; }
.ly-prog small { display: block; font-size: 11.5px; color: #a99cc4; line-height: 1.7; margin-top: 2px; }
.ly-bal { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 10px; }
.ly-bal div { background: rgba(255, 255, 255, .05); border-radius: 12px; padding: 10px 12px; display: grid; gap: 2px; }
.ly-bal small { font-size: 11.5px; color: #a99cc4; }
.ly-bal b { font-size: 19px; color: #ffd76a; }
.ly-ex { display: grid; grid-template-columns: 1fr 1.3fr; gap: 8px; }
.ly-ex input { height: 50px; border-radius: 14px; border: 1px solid rgba(255, 255, 255, .15); background: rgba(0, 0, 0, .25); color: #fff; font: 700 17px inherit; font-family: inherit; text-align: center; }
.ly-ex input:disabled { opacity: .5; }
.ly-levels { display: grid; gap: 6px; }
.ly-levels div { display: grid; grid-template-columns: 1.2fr 1.4fr auto; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 10px; font-size: 13px;
  background: rgba(255, 255, 255, .04); border: 1px solid transparent; }
.ly-levels div.on { border-color: var(--c); background: color-mix(in srgb, var(--c) 18%, transparent); }
.ly-levels div b { color: var(--c); }
.ly-levels div span:last-of-type { color: #b8acd6; font-size: 12px; }
.ly-log div { display: flex; justify-content: space-between; align-items: center; padding: 6px 0; border-bottom: 1px dashed rgba(255, 255, 255, .08); font-size: 13px; }
.ly-log small { color: #a99cc4; }