/* 🤖 Al Jawahiri wheel — built from the approved Canva design: a calm navy screen, one glowing
   wheel with the mascot in its centre, a lime spin button, and round icon buttons drawn in the
   language of the bot's icon pack (ice-blue outline, lime accent).
   The brand colours come from the server (admin settings) as CSS variables on :root;
   these are the defaults. */
:root {
  --bg: #0B1628; --primary: #E1FE64; --secondary: #8BC4DF; --extra: #2A8FE8;
  --small: #1A3A6B; --nothing: #101E36; --text: #FFFFFF; --text-dark: #0B1628;
  --wheel: min(90vw, 410px, 52vh);
  --display: "Baloo Bhaijaan 2", "Readex Pro", system-ui, sans-serif;
  --body: "Readex Pro", system-ui, -apple-system, "Segoe UI", Tahoma, sans-serif;
  --line: color-mix(in srgb, var(--secondary) 55%, transparent);     /* an outline, like the icons */
  --tint: color-mix(in srgb, var(--secondary) 9%, var(--bg));         /* a surface on the navy */
  --surface: color-mix(in srgb, var(--bg) 88%, var(--secondary));
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
[hidden] { display: none !important; }

/* An icon of the emoji pack: the device's emoji until the animated one is drawn in it. */
.ji {
  display: inline-grid; place-items: center; width: 1.35em; height: 1.35em; margin-inline-end: .35em;
  font-style: normal; line-height: 1; vertical-align: -0.28em; flex: none;
}
.ji svg { width: 100% !important; height: 100% !important; }
.slot-icon { width: 30px; height: 30px; margin: 0; font-size: 20px; display: grid; }
.big-icon { width: 76px; height: 76px; font-size: 52px; margin: 0 auto 4px; display: grid; }

html, body { margin: 0; min-height: 100%; background: var(--bg); color: var(--text); }
body {
  font-family: var(--body); font-size: 15px; line-height: 1.6;
  overscroll-behavior: none; user-select: none; -webkit-user-select: none;
}
/* a dialog is open: the page behind it stays still */
html.modal-open, html.modal-open body { overflow: hidden; }

main {
  max-width: 480px; margin: 0 auto; min-height: 100vh; overflow-x: clip;
  padding: max(12px, env(safe-area-inset-top)) 16px max(14px, env(safe-area-inset-bottom));
  display: flex; flex-direction: column; align-items: center; gap: 12px;
  /* the studio light of the mascot's renders: a blue pool behind the wheel */
  background: radial-gradient(70% 38% at 50% 50%, color-mix(in srgb, var(--extra) 22%, transparent), transparent 72%);
}
main.loading .stage { opacity: .35; }

/* ------------------------------------------------------------ round icon buttons (the icon pack) */
.icon-btn {
  display: grid; place-items: center; flex: none; width: 46px; height: 46px; padding: 0;
  border-radius: 50%; border: 2px solid var(--secondary); background: var(--tint); color: var(--text);
  font-size: 21px; cursor: pointer; transition: transform .08s, opacity .2s;
}
.icon-btn .ji { margin: 0; }
.icon-btn:active:not(:disabled) { transform: scale(.94); }
.icon-btn:disabled { opacity: .35; cursor: default; }
.icon-btn:focus-visible { outline: 2px solid var(--primary); outline-offset: 3px; }
.icon-spacer { width: 46px; flex: none; }

/* ------------------------------------------------------------ header */
.top { width: 100%; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.title-row { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.top h1 {
  flex: 1; min-width: 0; margin: 0; text-align: center;
  font-family: var(--display); font-size: clamp(21px, 7.2vw, 30px); font-weight: 800; line-height: 1.2; color: var(--primary);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* the balance card, in the place of the title */
.balance-card {
  flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px;
  padding: 7px 8px 7px 10px; border-radius: 20px;
  background: var(--tint); border: 1.5px solid var(--line);
}
.bal-icon {
  display: grid; place-items: center; flex: none; width: 36px; height: 36px; border-radius: 50%;
  background: color-mix(in srgb, var(--secondary) 16%, transparent); font-size: 19px;
}
.bal-icon .ji { margin: 0; }
.bal-text { flex: 1; min-width: 0; text-align: start; line-height: 1.15; }
.bal-label { font-size: 12px; font-weight: 500; color: color-mix(in srgb, var(--text) 68%, transparent);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bal-main { font-family: var(--display); font-size: 23px; font-weight: 800; color: var(--primary);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bal-bonus {
  flex: none; display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 5px 10px; border-radius: 14px; line-height: 1.2;
  background: color-mix(in srgb, var(--primary) 11%, transparent);
  border: 1px solid color-mix(in srgb, var(--primary) 28%, transparent);
}
.bal-bonus small { font-size: 10.5px; font-weight: 500; color: color-mix(in srgb, var(--text) 70%, transparent); }
.bal-bonus b { font-size: 14px; font-weight: 700; color: var(--primary); }
.chip {
  display: inline-flex; align-items: center; padding: 3px 22px 4px; border-radius: 999px;
  font-size: 15px; font-weight: 600; background: var(--tint); border: 1.5px solid var(--line);
}

/* 👥 the referral contest: a short line and one light per friend */
.referral {
  width: 100%; max-width: 360px; padding: 7px 12px 9px; border-radius: 16px;
  background: var(--tint); border: 1.5px solid color-mix(in srgb, var(--secondary) 30%, transparent);
  font-size: 13px; line-height: 1.5; text-align: start;
}
.ref-row { display: flex; align-items: center; gap: 6px; }
.ref-row .ji { margin: 0; }
.ref-text { flex: 1; min-width: 0; font-weight: 500; }
.ref-count { flex: none; font-family: var(--display); font-weight: 800; font-size: 16px; line-height: 1; color: var(--primary); unicode-bidi: isolate; }
.ref-bar { display: flex; gap: 5px; height: 6px; margin-top: 6px; }
.ref-seg { flex: 1; height: 100%; border-radius: 999px; background: color-mix(in srgb, var(--text) 14%, transparent); transition: background-color .4s, box-shadow .4s; }
.ref-seg.on { background: var(--primary); box-shadow: 0 0 8px color-mix(in srgb, var(--primary) 55%, transparent); }
.referral.won { border-color: color-mix(in srgb, var(--primary) 60%, transparent); }
.referral.won .ref-text { color: var(--primary); font-weight: 600; }

/* ------------------------------------------------------------ the wheel */
.stage { position: relative; width: var(--wheel); height: var(--wheel); margin-block: auto; flex: none; }  /* centred in the free space */
.top { margin-bottom: 30px; }                                  /* room for the crown pointer */
.stage::before {                                    /* the soft blue glow around the ring */
  content: ""; position: absolute; inset: -6%; z-index: -1; border-radius: 50%; pointer-events: none;
  background: radial-gradient(closest-side, transparent 80%, color-mix(in srgb, var(--extra) 30%, transparent) 92%, transparent);
}
#wheel { width: 100%; height: 100%; display: block; overflow: visible; }
.slot-label { font-family: var(--display); font-weight: 800; }

/* the pointer: the icon pack's crown over a rounded lime pin; it flicks at every slot */
.pointer {
  position: absolute; top: -30px; left: 50%; width: 12%; min-width: 36px; z-index: 4;
  transform: translateX(-50%); transform-origin: 50% 25%; overflow: visible;
  filter: drop-shadow(0 4px 5px rgba(0, 0, 0, .55)) drop-shadow(0 0 8px color-mix(in srgb, var(--primary) 35%, transparent));
}
.pointer .pin { fill: var(--primary); stroke: var(--primary); stroke-width: 6; stroke-linejoin: round; }
.pointer .pin-dot { fill: var(--bg); }
.pointer.tick { animation: tick .12s ease-out; }
@keyframes tick { 50% { transform: translateX(-50%) rotate(-12deg); } }

/* the lights on the ring: still at rest, a chase while the wheel turns */
.spinning .lamps .odd { animation: chase .3s ease-in-out infinite; }
.spinning .lamps .even { animation: chase .3s ease-in-out .15s infinite; }
@keyframes chase { 0%, 100% { opacity: 1; } 50% { opacity: .25; } }

.win-glow { opacity: 0; }
.win-glow.on { animation: win 1.1s ease-out 3; }
@keyframes win { 0% { opacity: 0; } 30% { opacity: .32; } 100% { opacity: 0; } }

/* confetti from the centre: round dots and short rounded bars */
.confetti { position: absolute; left: 50%; top: 50%; width: 0; height: 0; z-index: 5; pointer-events: none; }
.confetti i {
  position: absolute; width: 7px; height: 14px; border-radius: 99px; opacity: 0;
  animation: burst 1.5s cubic-bezier(.15, .7, .3, 1) forwards;
}
@keyframes burst {
  0% { opacity: 1; transform: translate(0, 0) rotate(0) scale(.5); }
  70% { opacity: 1; }
  100% { opacity: 0; transform: translate(var(--dx), calc(var(--dy) + 110px)) rotate(var(--rot)) scale(1); }
}

/* the centre: the mascot's face on a round button with a lime ring */
.hub {
  position: absolute; z-index: 2; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: 28%; height: 28%; border-radius: 50%; display: grid; place-items: center; overflow: hidden;
  background: radial-gradient(circle at 50% 38%, color-mix(in srgb, var(--extra) 40%, var(--bg)), var(--bg) 72%);
  box-shadow: 0 0 0 5px var(--primary), 0 0 0 9px var(--bg), 0 0 24px 8px color-mix(in srgb, var(--extra) 35%, transparent);
}
.hub > * { width: 84%; height: 84%; object-fit: contain; }
.hub canvas { width: 100%; height: 100%; }
#hub-default { overflow: visible; }
/* the crown of the logo, everywhere it appears: lime, a hollow peak, two ice-blue dots inside */
.crown-body { fill: var(--primary); }                 /* exact logo shape: no outline added */
.crown-dot { fill: var(--secondary); }
.bot-head { fill: var(--text); }
.bot-visor { fill: var(--bg); }
/* eyes are lines, never dots: a ring at rest and while turning, an arch for joy, a line slanting out for sadness */
.bot-eye { fill: none; stroke: var(--extra); stroke-width: 3.6; }
.bot-mouth, .bot-frown, .eye-happy, .eye-sad { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.bot-mouth, .bot-frown { stroke: var(--bg); stroke-width: 3; }
.eye-happy, .eye-sad { stroke: var(--extra); stroke-width: 4; }
.eye-happy, .eye-sad, .bot-frown { display: none; }
/* a slow blink now and then: the only motion while nobody touches the page */
.eye-open { transform-box: fill-box; transform-origin: center; animation: blink 6s ease-in-out infinite; }
@keyframes blink { 0%, 94%, 100% { transform: scaleY(1); } 97% { transform: scaleY(.1); } }
/* the face answers the result */
.hub.happy .eye-open, .hub.sad .eye-open { display: none; }
.hub.happy .eye-happy, .hub.sad .eye-sad { display: inline; }
.hub.sad .bot-mouth { display: none; }
.hub.sad .bot-frown { display: inline; }
.hub.happy #hub-default { animation: hop .5s ease-out 2; }
@keyframes hop { 40% { transform: translateY(-5%); } }

.message { min-height: 1.4em; margin: 4px 0 0; text-align: center; font-size: 14.5px; font-weight: 500; }
.message.error { color: #FF8A80; }

/* ------------------------------------------------------------ buttons
   Two states each: bright when it can be used, faded (same colour, low strength) when not. */
.controls { width: 100%; display: flex; flex-direction: column; gap: 12px; padding-top: 4px; }
.bottom-row { display: flex; align-items: center; justify-content: space-between; }
.controls .btn.buy { width: auto; margin-inline: 56px; }        /* over the gap between the two round buttons */
.btn {
  display: flex; align-items: center; justify-content: center; width: 100%; border: 0; border-radius: 999px;
  padding: 14px 18px; cursor: pointer; font: inherit; font-weight: 700; line-height: 1.35;
  transition: transform .08s, background-color .25s, color .25s, opacity .25s;
}
.btn:active:not(:disabled) { transform: translateY(2px); }
.btn:disabled { cursor: default; }
.btn:focus-visible { outline: 3px solid var(--text); outline-offset: 3px; }

.btn.primary {
  background: var(--primary); color: var(--text-dark);
  font-family: var(--display); font-size: 26px; font-weight: 800; padding: 13px 18px;
  box-shadow: 0 10px 26px color-mix(in srgb, var(--primary) 22%, transparent);
}
.btn:disabled:not(.empty) { opacity: .6; }              /* busy (the wheel is turning) */
.btn.primary.empty {                                     /* faded: no spins left */
  background: color-mix(in srgb, var(--primary) 22%, var(--bg)); color: color-mix(in srgb, var(--primary) 60%, var(--bg));
  font-size: 21px; box-shadow: none;
}
.btn.buy { min-width: 0; background: var(--secondary); color: var(--text-dark); font-size: 15px; padding: 12px 14px; }
.btn.buy.empty {                                         /* faded: buying not possible */
  background: color-mix(in srgb, var(--secondary) 26%, var(--bg)); color: color-mix(in srgb, var(--secondary) 60%, var(--bg)); }
.btn.buy .label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.btn.ghost { background: var(--tint); color: var(--text); border: 1.5px solid var(--line); font-size: 15px; font-weight: 600; padding: 11px; }

/* ------------------------------------------------------------ dialogs */
.modal {
  position: fixed; inset: 0; z-index: 10; display: grid; place-items: center; padding: 16px;
  background: color-mix(in srgb, var(--bg) 70%, rgba(0, 0, 0, .6)); backdrop-filter: blur(4px);
  animation: fade .2s ease-out;
}
.modal[hidden] { display: none; }
.card {
  width: min(100%, 380px); padding: 22px 18px 16px; border-radius: 28px; text-align: center;
  background: var(--surface); border: 1.5px solid var(--line);
  box-shadow: 0 24px 60px rgba(0, 0, 0, .55); animation: pop .3s cubic-bezier(.2, 1.2, .4, 1);
}
.card .big { font-family: var(--display); font-size: 32px; font-weight: 800; color: var(--primary); line-height: 1.3; }
.card .text { margin: 8px 0 18px; font-size: 15px; line-height: 1.8; white-space: pre-line; }
.card .text b { color: var(--primary); }
.card .actions { display: flex; flex-direction: column; gap: 10px; }
.card .btn.primary { font-size: 22px; }
.card .btn.buy { flex: none; }
/* the result: the mascot itself celebrates (a win) or is sorry (a miss) */
.result-bot { display: block; width: 132px; height: 165px; margin: -6px auto 2px; overflow: visible; }
.result-bot .arm { fill: none; stroke: var(--text); stroke-width: 9; stroke-linecap: round; }
.result-bot .hand { fill: var(--extra); }
.result-bot .core { fill: var(--extra); stroke: var(--primary); stroke-width: 3.5; }
.result-bot .eye-happy, .result-bot .eye-sad { fill: none; stroke: var(--extra); stroke-width: 4.5; stroke-linecap: round; }
.result-bot .mouth-happy { fill: var(--bg); }
.result-bot .mouth-sad { fill: none; stroke: var(--bg); stroke-width: 3.2; stroke-linecap: round; }
.result-bot .spark { fill: none; stroke-width: 3; stroke-linecap: round; }
.result-bot .spark.lime { stroke: var(--primary); }
.result-bot .spark.ice { stroke: var(--secondary); }
.result-bot .spark-dot.lime { fill: var(--primary); }
.result-bot .spark-dot.ice { fill: var(--secondary); }
.result-bot .eye-happy { display: inline; }
.result-bot .down, .result-bot .eye-sad, .result-bot .mouth-sad { display: none; }
/* one moment of joy: a hop and the sparkles twinkling */
#result:not(.lost) .rb { transform-box: fill-box; transform-origin: 50% 100%; animation: cheer .55s cubic-bezier(.3, 1.6, .5, 1) 2; }
#result:not(.lost) .sparkles > * { animation: twinkle 1.2s ease-in-out infinite; }
#result:not(.lost) .sparkles > :nth-child(2n) { animation-delay: .4s; }
#result:not(.lost) .sparkles > :nth-child(3n) { animation-delay: .8s; }
@keyframes cheer { 40% { transform: translateY(-9px) scale(1.03); } }
@keyframes twinkle { 50% { opacity: .2; } }
/* a miss: the same robot, arms down, sad face, no sparkles, calmer colours */
#result.lost .up, #result.lost .eye-happy, #result.lost .mouth-happy, #result.lost .sparkles { display: none; }
#result.lost .down, #result.lost .eye-sad, #result.lost .mouth-sad { display: inline; }
#result.lost .rb { transform-box: fill-box; transform-origin: 50% 100%; transform: rotate(-4deg); }
#result.lost .card { border-color: color-mix(in srgb, var(--secondary) 30%, transparent); }
#result.lost .big { color: var(--secondary); }
#result:not(.lost) .card { border-color: color-mix(in srgb, var(--primary) 55%, transparent);
  box-shadow: 0 24px 60px rgba(0, 0, 0, .55), 0 0 40px color-mix(in srgb, var(--primary) 14%, transparent); }
@keyframes fade { from { opacity: 0; } }
@keyframes pop { from { transform: scale(.88); opacity: 0; } }

/* 📜 the terms dialog: the account first, then the admin's text, scrolling inside the card */
.rules-card {
  width: min(100%, 420px); max-height: calc(100vh - 32px); padding: 18px 16px 14px;
  display: flex; flex-direction: column; text-align: start;
}
.rules-title {
  display: flex; align-items: center; justify-content: center; flex: none;
  margin: 0 0 12px; font-family: var(--display); font-size: 22px; font-weight: 800; color: var(--primary);
}
.rules-body {
  flex: 1 1 auto; min-height: 0; max-height: 70vh; overflow-y: auto;
  overscroll-behavior: contain; -webkit-overflow-scrolling: touch;
  padding-inline-end: 8px; font-size: 15px; line-height: 1.85;
  user-select: text; -webkit-user-select: text;
  scrollbar-width: thin; scrollbar-color: var(--line) transparent;
}
.rules-text { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.rules-text.muted { opacity: .55; text-align: center; padding: 18px 0; }
.account, .rules-ref { padding: 10px 12px; border-radius: 16px; background: var(--tint); }
.account { margin-bottom: 14px; }
.rules-ref { margin-top: 14px; }
.account h3, .rules-ref h3 { display: flex; align-items: center; margin: 0 0 4px; font-family: var(--display); font-size: 18px; font-weight: 800; color: var(--primary); }
.account p, .rules-ref p { margin: 0; white-space: pre-wrap; }
.account p { color: color-mix(in srgb, var(--text) 80%, transparent); font-size: 14px; }
.rules-card > .btn { flex: none; margin-top: 14px; }

/* ------------------------------------------------------------ small screens */
@media (max-height: 760px) {
  main.has-ref { gap: 8px; --wheel: min(90vw, 410px, 38vh); }
  main.has-ref .controls { gap: 8px; padding-top: 0; }
  main.has-ref .icon-btn { width: 42px; height: 42px; }
  main.has-ref .top { gap: 8px; margin-bottom: 26px; }
  main.has-ref .controls { gap: 10px; }
}
@media (max-height: 620px) {
  :root { --wheel: min(80vw, 46vh); }
  .bal-main { font-size: 19px; }
  main { gap: 8px; }
  .top { gap: 6px; }
  .icon-btn, .icon-spacer { width: 40px; height: 40px; font-size: 18px; }
  .btn.primary { font-size: 22px; padding: 9px 16px; }
  main { padding-bottom: max(10px, env(safe-area-inset-bottom)); }
  .btn.buy { padding: 10px 12px; font-size: 14px; }
  .controls { gap: 8px; }
  main.has-ref { --wheel: min(76vw, 34vh); }
  .referral { font-size: 12px; padding: 5px 10px 7px; }
}
@media (max-width: 360px) {
  .bal-main { font-size: 19px; }
  .bal-icon { width: 30px; height: 30px; font-size: 16px; }
  .balance-card { gap: 7px; padding: 6px 6px 6px 8px; }
  .bal-bonus { padding: 4px 7px; }
  .bal-bonus b { font-size: 13px; }
  .btn.buy { font-size: 13px; padding: 9px 8px; }
  .controls .btn.buy { margin-inline: 46px; }
  .icon-btn, main.has-ref .icon-btn { width: 40px; height: 40px; font-size: 18px; }
}

@media (prefers-reduced-motion: reduce) {
  .card, .modal, .spinning .lamps *, .pointer.tick, .eye-open, .hub.happy #hub-default, .result-bot * { animation: none !important; }
  .ref-seg { transition: none; }
}