/* Luck by naam | v5.1.0
   No absolute positioning. Screens use flex (column) and the circle art uses
   grid stacking for the text that sits on top of it.
   --u is one design unit: 1/100 of the stage width, but it shrinks when the
   screen is short, so the whole design always fits without cutting.
   (Design px / 32.51 = value in u) */
@font-face{
  font-family:"Broone";
  src:url("../assets/fonts/Broone.woff2") format("woff2"),
      url("../assets/fonts/Broone.woff") format("woff");
  font-display:swap;
}
:root{--blue:#1b0dd6;--ink:#1545b7;--sky:#00aeef;--gold:#fcd7a7}
*{margin:0;padding:0;box-sizing:border-box}
html,body{height:100%}
body{background:#10155c;font-family:"Broone",Georgia,serif;-webkit-font-smoothing:antialiased;
  display:flex;justify-content:center;align-items:center;overflow:hidden}

/* ---------- stage ---------- */
.stage{width:min(100vw,440px);height:100vh;height:100dvh;max-height:952px;
  container-type:size;overflow:hidden;color:#fff;display:grid;
  background:url('../assets/img/jumaani_bg.jpg') center/cover no-repeat
}

/* every screen sits in the same grid cell (stacked without absolute) */
.screen{grid-area:1/1;min-height:0;min-width:0;
  --u:min(1cqw,.4622cqh);
  --s:var(--u);            /* spacing unit: shrunk on phones, see media query */
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:calc(3*var(--s)) calc(4*var(--s));
  opacity:0;visibility:hidden;transition:opacity .3s}
.screen.is-active{opacity:1;visibility:visible}
.screen.light{--u:1cqw;background:#fff;color:var(--ink);justify-content:flex-start;overflow-y:auto}

/* Phones: tighten the gaps between elements. Sizes stay on --u, so the orb,
   logo and rings keep their proportions - only the space around them shrinks.
   Needed because the 14px text floor takes more vertical room on small screens. */
@media (max-width:440px), (max-height:740px){
  .screen,.popup{--s:calc(var(--u)*.68)}
}

svg{display:block;overflow:visible}
svg text{fill:#fff;font-family:"Broone",Georgia,serif}
svg .t-center{text-anchor:middle}

/* ---------- logo ---------- */
.logo-big{width:calc(48*var(--u));height:auto;flex:none}
.logo-small{width:calc(22.5*var(--u));height:auto;flex:none}

/* ---------- circle art + things on top of it ---------- */
.orb{display:grid;place-items:center;width:calc(91.4*var(--u));flex:none;margin-top:calc(9*var(--s))}
.orb > *{grid-area:1/1}
.orb > svg{width:100%;height:auto}
.orb-intro{margin-top:calc(10.8*var(--s))}
.orb-result{margin-top:calc(2.5*var(--s))}
.orb-mobile{width:calc(90.7*var(--u));margin-top:0}

.orbit{fill:none;stroke:url(#gOrbit);stroke-width:12}
.lbl path{fill:none}
svg .lbl text{fill:#e2cc9a}
svg .ringtxt{fill:url(#gRingText)}

.swap-a{animation:swapA 8s ease-in-out infinite}
.swap-b{opacity:0;animation:swapB 8s ease-in-out infinite}
@keyframes swapB{0%,32%{opacity:0}44%,88%{opacity:1}100%{opacity:0}}
@keyframes swapA{0%,32%{opacity:1}44%,88%{opacity:0}100%{opacity:1}}
.spin{transform-box:view-box;transform-origin:1636px 3686px;animation:spin 60s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){
  .swap-a{animation:none;opacity:0}.swap-b{animation:none;opacity:1}.spin{animation:none}}

/* ---------- text ---------- */
.headline{font-weight:normal;text-align:center;font-size:calc(5.63*var(--u));line-height:1.05;
  letter-spacing:-.02em;margin-top:calc(8*var(--s))}
.hint{width:calc(75*var(--u));text-align:center;font-size:max(14px,calc(2.62*var(--u)));line-height:1.05;
  margin-top:calc(7*var(--s))}
.res-name{font-weight:normal;font-size:calc(12*var(--u));line-height:1;white-space:nowrap;
  max-width:100%;overflow:hidden;text-align:center;margin-top:calc(6*var(--s))}
.res-sub{font-size:calc(5.1*var(--u));line-height:1.1;margin-top:calc(.5*var(--s));text-transform:uppercase;letter-spacing:1px;text-align:center;margin-bottom:20px;}
.res-score{font-size:calc(4.55*var(--u));margin-top:calc(7*var(--s))}
.res-score .patch{display:inline-block;background:#ffe11b;color:#10155c;
  padding:calc(1.2*var(--s)) calc(3*var(--s));border-radius:calc(3*var(--u))}

/* ---------- buttons ---------- */
.btn{flex:none;height:calc(8.8*var(--u));border-radius:calc(9*var(--u));
  border:calc(.55*var(--u)) solid transparent;margin-top:calc(3.8*var(--s));
  background:linear-gradient(#029ed9,var(--sky) 30%) padding-box,
             linear-gradient(90deg,var(--gold),#6d604c 50%,var(--gold)) border-box;
  color:#fff;font:calc(5.37*var(--u))/1 "Broone",Georgia,serif;cursor:pointer;
  display:flex;align-items:center;justify-content:center;padding-bottom:calc(.4*var(--s));
  -webkit-tap-highlight-color:transparent;box-shadow:0 calc(.4*var(--u)) calc(1.4*var(--u)) rgba(0,0,0,.25)}
.btn:active{transform:translateY(calc(.3*var(--u)))}
.btn:disabled{opacity:.85;cursor:not-allowed}
.btn:focus-visible,.link:focus-visible,.close:focus-visible{outline:calc(.4*var(--u)) solid #fff;}
.w-calc{width:calc(35.4*var(--u))}
.w-score{width:calc(42.2*var(--u));margin-top:20px;}
.w-share{width:calc(8.8*var(--u))}
.w-redeem{width:calc(54*var(--u))}
.w-submit{width:calc(31*var(--u))}
.w-again{width:calc(8.8*var(--u))}
/* icon-only buttons: .btn already centres its content with flex.
   brightness(0) makes the artwork solid black, invert(1) flips it to white. */
.btn-icon{padding:0}
.btn-icon img{width:calc(4.2*var(--u));height:auto;display:block;
  filter:brightness(0) invert(1)}
.btn-row{display:flex;gap:calc(4.3*var(--s));margin-top:calc(1*var(--s))}
.btn-row-mob{margin-top:calc(3*var(--s))}

.link{background:none;border:0;font:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent}
.disc-link{color:rgba(255,255,255,.6);font-size:max(14px,calc(2.6*var(--u)));margin-top:calc(5*var(--s));padding:calc(1*var(--s))}
.back-link{align-self:flex-start;color:rgba(21,69,183,.7);font-size:max(14px,calc(2.8*var(--u)));
  margin-bottom:calc(6*var(--s));padding:calc(1*var(--s)) 0}

/* ---------- T&C ---------- */
.tnc{display:flex;align-items:center;gap:calc(1.5*var(--s));cursor:pointer;
  font-size:max(14px,calc(2.78*var(--u)));margin-top:calc(11.7*var(--s));position:relative}
.tnc input{position:absolute;opacity:0;width:1px;height:1px}
.tnc-link{color:inherit;font-size:inherit;text-decoration:underline;
  text-underline-offset:calc(.4*var(--u));padding:0}
.ring{width:calc(4.06*var(--u));height:calc(4.06*var(--u));border-radius:50%;
  border:calc(.5*var(--u)) solid transparent;display:grid;place-items:center;
  background:linear-gradient(#10155c,#10155c) padding-box,
             linear-gradient(90deg,#f1f2f5,#c5c6d5 60%,transparent) border-box}
.ring::after{content:"";width:60%;height:60%;border-radius:50%;background:#fff;
  transform:scale(0);transition:transform .15s}
.tnc input:checked + .ring::after{transform:scale(1)}
.tnc input:focus-visible + .ring{outline:calc(.3*var(--u)) solid #fff;}

/* ---------- input fields on the circles ---------- */
.field{display:flex;align-items:center;justify-content:center;text-align:center;
  outline:none;caret-color:#fff;color:#fff;font-size:calc(8.39*var(--u));line-height:.94;overflow:hidden;
  word-break:break-word;overflow-wrap:anywhere}
.field:empty::before{content:attr(data-ph);white-space:pre-line;opacity:.95}
.name-field{width:52%;height:20%;text-transform:capitalize}
.name-field:empty::before{text-transform:none}
.mob-field{width:62%;height:46%;letter-spacing:calc(.4*var(--u))}
.mob-field:empty::before{letter-spacing:0}
/* confirmation sits in the circle, in the place the number was typed */
.mob-done{width:62%;display:flex;align-items:center;justify-content:center;
  text-align:center;color:#fff;font-size:calc(8.39*var(--u));line-height:.94;
  word-break:break-word;overflow-wrap:anywhere}
.mob-done[hidden]{display:none}
/* .field sets display:flex, which outranks the UA [hidden] rule */
.field[hidden]{display:none}
/* error sits directly under the number, inside the circle. The number field is
   46% tall and centred, so its underside is at 73% of the orb. */
.mob-err{align-self:start;
    margin-top: 57%;
    text-align: center;
    font-size: calc(4.6 * var(--u));
    line-height: 1.1;
    background: #c1121f;
    width: 60%;
    border-radius: 10px;
    padding: 10px;
    color: #fff;}
.mob-err[hidden]{display:none}

/* ---------- mobile popup (over the result screen) ---------- */
.popup{grid-area:1/1;z-index:5;min-height:0;--u:min(1cqw,.4622cqh);--s:var(--u);
  display:flex;align-items:center;justify-content:center;padding:calc(4*var(--s));
  background:rgba(6,10,48,.72);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  opacity:0;visibility:hidden;transition:opacity .25s,visibility .25s}
.popup.is-open{opacity:1;visibility:visible}
.popup-box{display:flex;flex-direction:column;align-items:center;
  transform:scale(.9);transition:transform .25s cubic-bezier(.2,.8,.3,1.2)}
.popup.is-open .popup-box{transform:none}
@media (prefers-reduced-motion:reduce){.popup,.popup-box{transition:none}}

.close{place-self:start;margin:5.7% 0 0 74.1%;width:10%;aspect-ratio:1;border-radius:50%;
  border:calc(.45*var(--u)) solid transparent;cursor:pointer;
  background:radial-gradient(circle at 30% 40%,#d8f3ff,#36b3ee 40%,#0a2f86) padding-box,
             linear-gradient(135deg,#fcd7a7,#8a7a60) border-box;
  color:#fddd97;font:300 calc(5.8*var(--u))/1 "Helvetica Neue",Arial,sans-serif;padding-bottom:calc(.6*var(--s))}
/* message section between the circle and the Submit button.
   It keeps its height when empty so the gap never collapses. */
/* the confirmation reads like the field placeholder: same white Broone type,
   centred under the circle, no box */
/* coin flip before the score lands. scaleX reads as a spin and, unlike
   rotateY, behaves the same in every SVG renderer. */
.is-off{display:none}
.flip-coin{transform-box:fill-box;transform-origin:center}
.flip-coin.is-flipping{animation:coinflip .42s linear 3}
@keyframes coinflip{
  0%{transform:scaleX(1)}
  50%{transform:scaleX(.06)}
  100%{transform:scaleX(1)}
}
#scoreGroup.is-in{animation:scorein .3s ease-out both}
@keyframes scorein{from{opacity:0;transform:scale(.8)}to{opacity:1;transform:none}}
#scoreGroup{transform-box:fill-box;transform-origin:center}
@media (prefers-reduced-motion:reduce){
  .flip-coin.is-flipping,#scoreGroup.is-in{animation:none}
}
/* redirect countdown, above the button */
.mob-count{margin-top:calc(3*var(--s));font-size:16px;color:#fff;text-align:center}
.mob-count[hidden]{display:none}
.mob-attempts{margin-top:calc(8*var(--s));font-size:14px;color:rgba(255,255,255,.75);text-align:center}

/* ---------- disclaimer ---------- */
.disc{width:calc(77.1*var(--u));text-align:center;margin-top:calc(8*var(--s));padding-bottom:calc(8*var(--s))}
.disc p{text-align:justify;text-align-last:center}
.intro{font-size:max(14px,calc(2.5*var(--u)));line-height:1.15}
.pill{width:calc(44.6*var(--u));height:calc(6.27*var(--u));margin:calc(6*var(--s)) auto calc(4.6*var(--s));
  border:calc(.25*var(--u)) solid var(--ink);border-radius:calc(4*var(--u));font-size:max(14px,calc(3.73*var(--u)));
  font-weight:normal;display:flex;align-items:center;justify-content:center}
.coins{font-size:max(14px,calc(3.55*var(--u)));line-height:1.18}
.coins span{display:block;font-size:max(14px,calc(2.9*var(--u)))}
.coins + .pill{margin-top:calc(4.9*var(--s))}
.method{font-size:max(14px,calc(2.5*var(--u)));line-height:1.23}

/* ---------- messages ---------- */
.msg{font-family:"Broone",Georgia,serif;max-width:calc(80*var(--u));text-align:center;font-size:max(14px,calc(2.9*var(--u)));line-height:1.2;
  color:#ffd2d2;margin-top:calc(2.5*var(--s))}
.msg:empty,.tries:empty{display:none}
.tries{font-size:max(14px,calc(2.7*var(--u)));color:rgba(255,255,255,.75);margin-top:calc(2*var(--s))}
.btn.is-busy{opacity:.7;pointer-events:none}
.tc-link{color:inherit;text-decoration:underline;text-underline-offset:.15em}
a.btn{text-decoration:none}
.btn[hidden]{display:none}
/* T&C not ticked: red ring + small shake */
.tnc.is-invalid .ring{background:linear-gradient(#10155c,#10155c) padding-box,linear-gradient(90deg,#ff8a8a,#ff5c5c) border-box}
.tnc.is-invalid{animation:shake .35s}
@keyframes shake{25%{transform:translateX(-1.5%)}75%{transform:translateX(1.5%)}}
@media (prefers-reduced-motion:reduce){.tnc.is-invalid{animation:none}}
/* intro: planets revolve around the rings (centre = 1636,3686 in PSD px) */
.revolve{transform-box:view-box;transform-origin:1636px 3686px;animation:revolve var(--t) linear infinite}
.revolve .self{transform-box:fill-box;transform-origin:center;animation:revolve var(--t) linear infinite reverse}
.revolve.outer{--t:60s}
.revolve.inner{--t:40s;animation-direction:reverse}
.revolve.inner .self{animation-direction:normal}
@keyframes revolve{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.revolve,.revolve .self{animation:none}}