/* First visit on a phone (website / iPhone home-screen app): the opening intro and the welcome slides.
   Same design as the Android app. Shown once; skipped entirely with reduced motion turned on (static version). */
.flw{position:fixed;inset:0;z-index:1000;overflow:hidden;color:#fff;font-family:var(--flp-text,"Open Sans",sans-serif);
  background:radial-gradient(80% 45% at 50% 38%,#0a5546 0%,#043f38 35%,#022c29 66%,#011a18 100%);
  padding:env(safe-area-inset-top,0px) 0 env(safe-area-inset-bottom,0px)}
.flw[hidden]{display:none}
.flw.is-out{animation:flw-out .5s ease both}
@keyframes flw-out{to{opacity:0;transform:scale(1.03)}}
.flw-dust i{position:absolute;width:3px;height:3px;border-radius:50%;background:#7fd9c0;opacity:0;animation:flw-dust 9s linear infinite}
.flw-dust i:nth-child(1){left:10%;top:85%}.flw-dust i:nth-child(2){left:28%;top:62%;animation-delay:-2s}.flw-dust i:nth-child(3){left:46%;top:92%;animation-delay:-4s}
.flw-dust i:nth-child(4){left:64%;top:70%;animation-delay:-6s}.flw-dust i:nth-child(5){left:82%;top:88%;animation-delay:-3s}.flw-dust i:nth-child(6){left:90%;top:40%;animation-delay:-7.5s}
@keyframes flw-dust{0%{transform:translateY(0);opacity:0}15%{opacity:.8}100%{transform:translateY(-260px);opacity:0}}

/* ---------- Intro (one run, about 6.5 s) ---------- */
.flw-intro{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:0 16px}
.flw-intro.is-out{animation:flw-out .6s ease both}
.flw-logo-stage{position:relative;width:min(320px,82vw);aspect-ratio:1;display:grid;place-items:center;perspective:900px}
.flw-logo-stage>*{grid-area:1/1}
.flw-glow{width:100%;height:100%;border-radius:50%;background:radial-gradient(circle,rgba(13,155,122,.42),rgba(8,90,72,.25) 40%,transparent 70%);animation:flw-glow 1s ease-out both}
@keyframes flw-glow{from{opacity:0;transform:scale(.7)}}
.flw-grid{width:100%;height:100%;opacity:0;animation:flw-grid 3.4s ease .9s both}
@keyframes flw-grid{25%,45%{opacity:.22}100%{opacity:0}}
.flw-logo{position:relative;width:81%;aspect-ratio:1;overflow:hidden;border-radius:50%;opacity:0;animation:flw-logo 1.3s cubic-bezier(.2,.8,.25,1) 1.7s both,flw-float 5s ease-in-out 3s infinite}
.flw-logo img{width:100%;height:100%;display:block}
@keyframes flw-logo{0%{opacity:0;transform:scale(.82) rotateY(-38deg);filter:blur(10px) brightness(1.8)}70%{opacity:1;transform:scale(1.03) rotateY(4deg);filter:none}100%{opacity:1;transform:none}}
@keyframes flw-float{0%,100%{transform:translateY(-4px) rotateY(-6deg)}50%{transform:translateY(4px) rotateY(6deg)}}
.flw-sweep{position:absolute;top:-10%;left:0;width:26%;height:120%;transform:translateX(-170%) skewX(-22deg);mix-blend-mode:screen;
  background:linear-gradient(90deg,transparent,rgba(255,226,160,.75),rgba(255,255,255,.9),rgba(255,226,160,.75),transparent);animation:flw-sweep .9s ease-in-out 3s both}
@keyframes flw-sweep{to{transform:translateX(420%) skewX(-22deg)}}
.flw-intro-neon,.flw-intro-orbit{width:100%;height:100%;overflow:visible}
.flw-intro-neon{filter:drop-shadow(0 0 6px #5ff5c8) drop-shadow(0 0 14px rgba(95,245,200,.6))}
.flw-intro-neon circle{stroke-dashoffset:700;animation:flw-draw 1.8s cubic-bezier(.5,0,.3,1) .4s both,flw-fade .8s ease 2.6s both}
.flw-intro-orbit{filter:drop-shadow(0 0 5px #e8c77a) drop-shadow(0 0 12px rgba(232,199,122,.6))}
.flw-intro-orbit ellipse{stroke-dashoffset:660;animation:flw-draw2 1.1s cubic-bezier(.45,0,.25,1) 3.3s both,flw-fade .6s ease 4.4s both}
@keyframes flw-draw{to{stroke-dashoffset:0}}
@keyframes flw-draw2{to{stroke-dashoffset:0}}
@keyframes flw-fade{to{opacity:0}}
.flw-spark{width:0;height:0;transform:rotate(var(--r))}
.flw-spark::after{content:"";position:absolute;left:-3px;top:-3px;width:6px;height:6px;border-radius:50%;background:#f6dfa2;box-shadow:0 0 8px #e8c77a;opacity:0;animation:flw-spark 1.1s ease-out 4.3s both}
@keyframes flw-spark{0%{opacity:0;transform:translateX(0) scale(.3)}40%{opacity:1;transform:translateX(70px)}100%{opacity:0;transform:translateX(150px) scale(.2)}}
.flw-word{margin:6px 0 0;font:700 clamp(32px,10vw,42px)/1.1 "Cinzel",serif;white-space:nowrap;letter-spacing:5px;
  background:linear-gradient(100deg,#cdb283,#e9d3a4 40%,#fff6dd 50%,#e9d3a4 60%,#cdb283);background-size:200% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;
  animation:flw-word .9s cubic-bezier(.2,.8,.2,1) 4.4s both,flw-shine 1.2s ease-in-out 5.3s both}
@keyframes flw-word{from{opacity:0;letter-spacing:20px;filter:blur(8px)}to{opacity:1;letter-spacing:5px;filter:none}}
@keyframes flw-shine{from{background-position:200% 0}to{background-position:-100% 0}}
.flw-tag{margin:10px 0 0;text-align:center;font-size:13px;font-weight:600;color:rgba(255,255,255,.86);animation:flw-up .8s ease 5s both}
@keyframes flw-up{from{opacity:0;transform:translateY(10px)}}
.flw-skip-intro,.flw-skip{min-height:44px;padding:0 16px;border:0;border-radius:22px;background:rgba(255,255,255,.08);color:rgba(255,255,255,.85);font:600 14px var(--flp-text,sans-serif);cursor:pointer}
.flw-skip-intro{position:absolute;top:calc(14px + env(safe-area-inset-top,0px));right:14px}

/* ---------- Welcome slides on a 3D cube ---------- */
.flw-ob{position:absolute;inset:0;display:flex;flex-direction:column;animation:flw-in .7s ease both}
@keyframes flw-in{from{opacity:0}}
.flw-head{display:flex;align-items:center;justify-content:space-between;padding:calc(16px + env(safe-area-inset-top,0px)) 14px 0 20px;min-height:60px}
.flw-scene{flex:1;position:relative;perspective:1100px;min-height:0}
.flw-cube{position:absolute;inset:0;transform-style:preserve-3d;transform:translateZ(calc(var(--half) * -1)) rotateY(calc(var(--page,0) * -90deg));transition:transform 1s cubic-bezier(.65,0,.25,1)}
.flw-face{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:0 22px;text-align:center;backface-visibility:hidden;-webkit-backface-visibility:hidden}
.flw-face[data-face="0"]{transform:rotateY(0deg) translateZ(var(--half))}
.flw-face[data-face="1"]{transform:rotateY(90deg) translateZ(var(--half))}
.flw-face[data-face="2"]{transform:rotateY(180deg) translateZ(var(--half))}
.flw-face[data-face="3"]{transform:rotateY(270deg) translateZ(var(--half))}
.flw-face h2{margin:12px 0 0;font:800 clamp(26px,7.6vw,31px)/1.08 var(--flp-title,"Nunito",sans-serif);letter-spacing:-.6px;color:#fff;opacity:0}
.flw-face h2 em{font-style:normal;color:#f3d58e}
.flw-face p{margin:10px 0 0;font-size:16px;line-height:1.5;color:rgba(255,255,255,.76);opacity:0}
.flw-face.is-on h2{animation:flw-text .6s cubic-bezier(.2,.8,.2,1) .6s both}
.flw-face.is-on p{animation:flw-text .6s cubic-bezier(.2,.8,.2,1) .75s both}
@keyframes flw-text{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}
.flw-stage{position:relative;width:min(340px,88vw);height:min(330px,44vh);flex:0 0 auto}
.flw-fx{position:absolute;left:50%;top:50%;width:min(320px,82vw);height:min(320px,82vw);transform:translate(-50%,-50%);overflow:visible;filter:drop-shadow(0 0 6px #5ff5c8);pointer-events:none}
.flw-neon{stroke-dashoffset:700;opacity:0}
.flw-orbit{stroke-dashoffset:660;opacity:0}
.is-on .flw-neon{animation:flw-neon 1.6s cubic-bezier(.5,0,.3,1) .35s both}
.is-on .flw-orbit{animation:flw-orb 1.6s cubic-bezier(.45,0,.25,1) 1s both}
@keyframes flw-neon{0%{stroke-dashoffset:700;opacity:1}55%{stroke-dashoffset:0;opacity:1}100%{stroke-dashoffset:0;opacity:.35}}
@keyframes flw-orb{0%{stroke-dashoffset:660;opacity:1}60%{stroke-dashoffset:0;opacity:1}100%{stroke-dashoffset:0;opacity:0}}
.flw-hero{position:absolute;left:50%;bottom:0;width:100%;height:auto;max-height:100%;object-fit:contain;transform:translateX(-50%);opacity:0;filter:drop-shadow(0 26px 30px rgba(0,0,0,.45))}
.flw-hero.is-right{left:auto;right:-6%;width:74%;transform:none}
.flw-hero.is-left{left:-8%;width:78%;transform:none}
.is-on .flw-hero{animation:flw-hero 1s cubic-bezier(.2,.9,.25,1) .3s both,flw-bob 4.2s ease-in-out 1.4s infinite}
.is-on .flw-hero.is-right{animation-name:flw-hero-r,flw-bob}
@keyframes flw-hero{from{opacity:0;translate:0 40px;scale:.82;rotate:y -28deg}to{opacity:1;translate:0 0;scale:1;rotate:y 0deg}}
@keyframes flw-hero-r{from{opacity:0;translate:80px 0;scale:.85;rotate:y 30deg}to{opacity:1;translate:0 0;scale:1;rotate:y 0deg}}
@keyframes flw-bob{0%,100%{translate:0 -6px}50%{translate:0 6px}}
.flw-chip{position:absolute;padding:10px 14px;border-radius:16px;background:#fff;color:#032b2b;font-weight:700;font-size:14px;line-height:1.2;text-align:left;box-shadow:0 16px 30px rgba(0,0,0,.35);opacity:0}
.flw-chip.is-tl{left:0;top:6px}.flw-chip.is-tr{right:0;top:4px}.flw-chip.is-gold{background:#e1b95c}
.is-on .flw-chip{animation:flw-text .5s ease .9s both,flw-bob 3.6s ease-in-out 1.5s infinite}
.flw-score{position:absolute;left:0;top:16px;width:58%;padding:12px;border-radius:22px;background:linear-gradient(160deg,#fff,#eaf6f4);color:#032b2b;text-align:center;
  box-shadow:0 30px 50px rgba(0,0,0,.45);opacity:0;font-size:11px}
.is-on .flw-score{animation:flw-hero 1s cubic-bezier(.2,.9,.25,1) .35s both}
.flw-score b{display:block;font-size:12px;font-weight:800}
.flw-score-ring{display:grid;place-items:center;width:78px;height:78px;margin:6px auto;border-radius:50%;background:conic-gradient(#0a6e57 calc(var(--v,0) * 1%),#d5e9e5 0);transition:--v 1s}
.is-on .flw-score-ring{--v:78}
.flw-score-ring i{display:grid;place-items:center;width:58px;height:58px;border-radius:50%;background:#fff;font:800 24px var(--flp-title,sans-serif);font-style:normal}
.flw-score ul{list-style:none;margin:6px 0 0;padding:0;display:grid;gap:5px;font-weight:700;text-align:left}
.flw-score li{display:flex;align-items:center;gap:5px;margin:0}
.flw-score s{display:block;width:12px;height:12px;border-radius:4px;background:var(--c);flex:0 0 12px}
.flw-score em{flex:1;height:5px;border-radius:3px;background:linear-gradient(90deg,#19a884 var(--w),#ddedea 0)}
.flw-tile{position:absolute;left:calc(var(--x) * var(--k,1));top:calc(var(--y) * var(--k,1));display:grid;place-items:center;width:84px;height:84px;border-radius:26px;opacity:0;
  box-shadow:0 8px 0 var(--ledge),0 22px 30px rgba(0,0,0,.4),inset -8px -10px 16px rgba(0,0,0,.25),inset 6px 6px 12px rgba(255,255,255,.35)}
.flw-tile svg{width:42px;height:42px;fill:none;stroke:var(--ink,#fff);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.flw-tile.is-gold{background:linear-gradient(155deg,#f6d98e,#e1b95c 45%,#a57a22);--ledge:#7a5a18;--ink:#032b2b}
.flw-tile.is-coral{background:linear-gradient(155deg,#ffb49f,#e8735a 50%,#b5452f);--ledge:#8a2e1e}
.flw-tile.is-white{background:linear-gradient(155deg,#fff,#eaf6f4);--ledge:#a9c7c1;--ink:#d9503a}
.flw-tile.is-green{background:linear-gradient(155deg,#4fe0b5,#19a884 45%,#0a6e57);--ledge:#064a3a}
.flw-tile.is-deep{background:linear-gradient(155deg,#3a8c7a,#06403a 60%,#032b2b);--ledge:#011515;--ink:#e8c77a}
.is-on .flw-tile{animation:flw-tile .8s cubic-bezier(.2,.9,.25,1.1) var(--d) both,flw-tfloat 4.4s ease-in-out calc(var(--d) + .9s) infinite}
@keyframes flw-tile{from{opacity:0;scale:.4;rotate:-20deg}to{opacity:1;scale:1;rotate:0deg}}
@keyframes flw-tfloat{0%,100%{translate:0 -8px}50%{translate:0 8px}}
.flw-bars{position:absolute;right:2%;bottom:18px;width:47%;height:230px;display:flex;align-items:flex-end;gap:9px}
.flw-bars i{flex:1;height:var(--h);border-radius:12px 12px 5px 5px;background:linear-gradient(180deg,#4fe0b5,#0a6e57);box-shadow:inset -5px -5px 10px rgba(3,43,43,.35),0 7px 0 #064a3a;transform-origin:bottom;transform:scaleY(0)}
.flw-bars i.is-gold{background:linear-gradient(180deg,#f6d98e,#b88a2c);box-shadow:inset -5px -5px 10px rgba(90,60,10,.4),0 7px 0 #7a5a18}
.is-on .flw-bars i{animation:flw-rise .9s cubic-bezier(.3,1.4,.5,1) var(--d) both}
@keyframes flw-rise{to{transform:scaleY(1)}}
.flw-arrow{position:absolute;inset:0;width:100%;height:100%;filter:drop-shadow(0 0 8px rgba(232,199,122,.7))}
.flw-arrow path{stroke-dasharray:300;stroke-dashoffset:300}
.is-on .flw-arrow path{animation:flw-draw 1.1s cubic-bezier(.5,0,.3,1) 1.2s both}
.is-on .flw-arrow path+path{animation-delay:2.1s}
.flw-foot{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:16px 22px calc(26px + env(safe-area-inset-bottom,0px))}
.flw-dots{display:flex;margin-left:-10px}
.flw-dots button{width:34px;height:44px;border:0;background:none;padding:0;cursor:pointer;display:grid;place-items:center}
.flw-dots button::after{content:"";width:8px;height:8px;border-radius:4px;background:rgba(255,255,255,.3);transition:width .4s cubic-bezier(.3,1.4,.5,1),background .4s}
.flw-dots button[aria-current="true"]::after{width:26px;background:#e1b95c}
.flw-next{width:64px;height:64px;border:0;border-radius:50%;cursor:pointer;display:grid;place-items:center;
  background:radial-gradient(circle at 34% 28%,#fff3cf,#e1b95c 55%,#b88a2c);box-shadow:0 7px 0 #8e6a1d,0 16px 30px rgba(225,185,92,.35);transition:transform .2s cubic-bezier(.3,1.6,.5,1),box-shadow .2s}
.flw-next:active,.flw-start:active{transform:translateY(6px);box-shadow:0 1px 0 #8e6a1d}
.flw-next svg,.flw-start svg{width:24px;height:24px;fill:none;stroke:#032b2b;stroke-width:2.8;stroke-linecap:round;stroke-linejoin:round}
.flw-start{flex:1;min-height:58px;display:inline-flex;align-items:center;justify-content:center;gap:10px;border:0;border-radius:18px;cursor:pointer;
  background:linear-gradient(180deg,#f2d283,#e1b95c);color:#032b2b;font:800 17px var(--flp-text,sans-serif);box-shadow:0 8px 0 #8e6a1d,0 18px 36px rgba(225,185,92,.28)}
.flw-start[hidden]{display:none}
@media (max-height:680px){.flw-stage{height:38vh}.flw-face p{font-size:14.5px}}
@media (prefers-reduced-motion:reduce){
  .flw *,.flw{animation:none!important;transition:none!important}
  .flw-face h2,.flw-face p,.flw-hero,.flw-chip,.flw-score,.flw-tile,.flw-word,.flw-tag,.flw-logo{opacity:1!important}
  .flw-bars i{transform:none}.flw-arrow path{stroke-dashoffset:0}.flw-neon,.flw-orbit,.flw-intro-neon circle,.flw-intro-orbit ellipse,.flw-grid{opacity:0}
  .flw-cube{transform:none!important}.flw-face{transform:none!important;opacity:0;visibility:hidden}.flw-face.is-on{opacity:1;visibility:visible}
}