/* FF Spin app v1.1.0 2026-09-18 (brand marks: First Five mark in the hub, Edtomorrow mark + wordmark in the kicker, First Five Plus mark on the prize chips)
   v1.0.0 2026-09-18 (Daily First Five Giveaway wheel). Static file, wp-content/uploads/et-apps/ff-spin/app.css.
   Scoped to #ethome .ffspin (the mount sits inside the homepage shortcode wrapper). Bebas Neue is the wheel label face. */
@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&display=swap');
#ethome .ffspin-wrap{max-width:1240px;margin:0 auto;padding:22px 26px 0}
#ethome .ffspin{position:relative;isolation:isolate;overflow:hidden;display:grid;grid-template-columns:450px 1fr;gap:10px 30px;align-items:center;background:#131f45;background-image:radial-gradient(900px 520px at 18% 50%,rgba(0,176,155,.42),transparent 60%),radial-gradient(700px 420px at 92% 10%,rgba(255,193,7,.22),transparent 60%),radial-gradient(600px 400px at 70% 110%,rgba(252,85,70,.18),transparent 60%);border:2px solid rgba(255,193,7,.55);border-radius:28px;padding:26px 34px 22px 26px;box-shadow:0 24px 60px rgba(19,31,69,.35),inset 0 0 0 1px rgba(255,255,255,.06),0 0 0 6px rgba(255,193,7,.08)}
#ethome .ffspin::before{content:"";position:absolute;inset:0;background:repeating-linear-gradient(135deg,rgba(255,255,255,.025) 0 2px,transparent 2px 14px);pointer-events:none;z-index:0}
#ethome .ffspin-glow{position:absolute;left:236px;top:50%;width:520px;height:520px;transform:translate(-50%,-50%);background:radial-gradient(circle,rgba(255,193,7,.34) 0%,rgba(255,193,7,.10) 38%,transparent 62%);filter:blur(6px);animation:ffglow 3.2s ease-in-out infinite;pointer-events:none;z-index:0}
@keyframes ffglow{0%,100%{opacity:.75;transform:translate(-50%,-50%) scale(1)}50%{opacity:1;transform:translate(-50%,-50%) scale(1.08)}}
#ethome .ffspin-confetti{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:6}
#ethome .ffspin-stage{position:relative;z-index:2;display:grid;place-items:center}
#ethome .ffspin-wheelwrap{position:relative;width:420px;height:420px}
#ethome .ffspin-ring{position:absolute;inset:0;width:100%;height:100%;z-index:1;filter:drop-shadow(0 10px 22px rgba(0,0,0,.45))}
#ethome .ffspin-wheel{position:absolute;left:50%;top:50%;width:370px;height:370px;transform:translate(-50%,-50%) rotate(0deg);transform-origin:center;z-index:2;filter:drop-shadow(0 4px 6px rgba(0,0,0,.35))}
#ethome .ffspin-flash{position:absolute;left:50%;top:50%;width:370px;height:370px;border-radius:50%;transform:translate(-50%,-50%);background:radial-gradient(circle,rgba(255,255,255,.95),rgba(255,235,150,.6) 40%,transparent 70%);opacity:0;pointer-events:none;z-index:3}
#ethome .ffspin-flash.go{animation:ffflash .9s ease-out}
@keyframes ffflash{0%{opacity:0}18%{opacity:1}100%{opacity:0}}
#ethome .ffspin-hub{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:80px;height:80px;border-radius:50%;border:0;cursor:pointer;z-index:4;background:radial-gradient(circle at 35% 30%,#ffffff,#f3f6fb 70%,#e2e8f2 100%);box-shadow:0 0 0 5px #131f45,0 0 0 9px #ffc107,0 8px 20px rgba(0,0,0,.45),inset 0 -4px 10px rgba(0,0,0,.10);display:grid;place-items:center;padding:0;transition:transform .15s ease}
#ethome .ffspin-hub img{display:block;width:52px;height:auto;pointer-events:none}
#ethome .ffspin-hub:hover{transform:translate(-50%,-50%) scale(1.06)}
#ethome .ffspin-hub:active{transform:translate(-50%,-50%) scale(.96)}
#ethome .ffspin-hub[disabled]{cursor:default}
#ethome .ffspin-pointer{position:absolute;left:50%;top:-12px;width:48px;height:67px;margin-left:-24px;transform-origin:50% 24px;z-index:5;filter:drop-shadow(0 6px 8px rgba(0,0,0,.45));transition:transform .09s cubic-bezier(.34,1.56,.64,1)}
#ethome .ffspin-pointer svg{width:100%;height:100%;display:block}
#ethome .ffspin-pointer.kick{transform:rotate(-16deg);transition-duration:.04s}
#ethome .ffspin-pointer.kickr{transform:rotate(16deg);transition-duration:.04s}
/* idle motion: slow cruise until the first spin */
#ethome .ffspin-wheel.idle{animation:ffidle 3.4s ease-in-out infinite alternate}
@keyframes ffidle{from{transform:translate(-50%,-50%) rotate(-4deg)}to{transform:translate(-50%,-50%) rotate(4deg)}}
/* marquee bulbs */
#ethome .ffspin-ring .bulb{fill:#ffe9a6;filter:url(#bulbglow)}
#ethome .ffspin-ring .bulb.b{fill:#ffc107}
#ethome .ffspin-ring .bulb.a{animation:ffbulbA 1.1s steps(1) infinite}
#ethome .ffspin-ring .bulb.b{animation:ffbulbB 1.1s steps(1) infinite}
@keyframes ffbulbA{0%,49%{opacity:1}50%,100%{opacity:.28}}
@keyframes ffbulbB{0%,49%{opacity:.28}50%,100%{opacity:1}}
#ethome .ffspin.spinning .ffspin-ring .bulb.a,#ethome .ffspin.spinning .ffspin-ring .bulb.b{animation-duration:.28s}
#ethome .ffspin.won .ffspin-ring .bulb{animation:ffbulbWin .5s steps(1) infinite!important}
@keyframes ffbulbWin{0%,49%{opacity:1;fill:#fff}50%,100%{opacity:1;fill:#ffc107}}
#ethome .ffspin-wheel .spark{transform-box:fill-box;transform-origin:center;animation:ffspark 1.4s ease-in-out infinite}
#ethome .ffspin-wheel .spark{transform-origin:0 0}
@keyframes ffspark{0%,100%{opacity:.15;transform:scale(.5)}50%{opacity:1;transform:scale(1.25)}}
#ethome .ffspin-wheel .jackglow{animation:ffjackglow 1.2s ease-in-out infinite alternate}
@keyframes ffjackglow{from{stroke-opacity:.35}to{stroke-opacity:1}}
#ethome .ffspin-wheel .hit{stroke:#fff;stroke-width:6;stroke-linejoin:round;pointer-events:none;animation:ffhit .6s ease-in-out infinite alternate}
@keyframes ffhit{from{stroke-opacity:.35;filter:none}to{stroke-opacity:1;filter:drop-shadow(0 0 7px #fff)}}
#ethome .ffspin .nw{white-space:nowrap}
/* copy column */
#ethome .ffspin-body{position:relative;z-index:2;min-width:0;color:#fff}
#ethome .ffspin-kicker{display:inline-flex;align-items:center;gap:10px;font-weight:800;font-size:12.5px;letter-spacing:.1em;text-transform:uppercase;color:#ffd043;margin-bottom:10px;flex-wrap:wrap}
#ethome .ffspin-kicker .brand{display:inline-flex;align-items:center;gap:7px;text-transform:none;letter-spacing:0}
#ethome .ffspin-kicker .brand img{width:20px;height:auto;display:block}
#ethome .ffspin-kicker .wm{font-weight:500;font-size:17px;color:#fff;letter-spacing:-.01em;line-height:1}
#ethome .ffspin-kicker .wm b{font-weight:900}
#ethome .ffspin-kicker .gname{display:inline-flex;align-items:center;gap:8px}
#ethome .ffspin-kicker .live{width:9px;height:9px;border-radius:50%;background:#9fc131;box-shadow:0 0 0 0 rgba(159,193,49,.7);animation:fflive 1.6s infinite}
@keyframes fflive{0%{box-shadow:0 0 0 0 rgba(159,193,49,.7)}70%{box-shadow:0 0 0 9px rgba(159,193,49,0)}100%{box-shadow:0 0 0 0 rgba(159,193,49,0)}}
#ethome .ffspin-kicker .sep{width:1px;height:14px;background:rgba(255,255,255,.3)}
#ethome .ffspin-kicker .tick{color:#fff;text-transform:none;letter-spacing:0;font-weight:700;font-size:13px;opacity:.9;transition:opacity .35s ease,transform .35s ease}
#ethome .ffspin-kicker .tick.out{opacity:0;transform:translateY(-6px)}
#ethome .ffspin-title{font-weight:900;font-size:clamp(26px,2.9vw,38px);line-height:1.05;letter-spacing:-.015em;margin-bottom:10px;color:#fff}
#ethome .ffspin-title .big{display:inline-block;font-size:1.12em;letter-spacing:.01em;background:linear-gradient(90deg,#ff4d6d,#ff9f1c,#ffe03d,#4ade80,#38bdf8,#c084fc,#ff4d6d);background-size:200% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;filter:drop-shadow(0 0 10px rgba(255,255,255,.35));animation:ffbig 2.4s ease-in-out infinite,ffrain 3s linear infinite}
@keyframes ffrain{from{background-position:0 0}to{background-position:200% 0}}
@keyframes ffbig{0%,100%{transform:scale(1)}50%{transform:scale(1.045)}}
#ethome .ffspin-lede{font-weight:700;font-size:16.5px;line-height:1.5;color:rgba(255,255,255,.86);max-width:52ch}
#ethome .ffspin-lede b{color:#ffe08a;font-weight:900}
#ethome .ffspin-prizes{display:flex;flex-wrap:wrap;gap:8px 10px;margin-top:14px}
#ethome .ffspin-prizes .pz{display:inline-flex;align-items:center;gap:6px;
}
#ethome .ffspin-prizes .pz img{width:18px;height:18px;display:block;margin-right:2px}
#ethome .ffspin-prizes .pz{font-weight:800;font-size:13px;color:#fff;background:rgba(255,255,255,.09);border:1px solid rgba(255,255,255,.18);padding:7px 12px;border-radius:100rem}
#ethome .ffspin-prizes .pz b{font-weight:900;color:#ffc107}
#ethome .ffspin-prizes .pz.year{background:linear-gradient(#131f45,#131f45) padding-box,linear-gradient(90deg,#ff2d55,#ff8a1e,#ffd84d,#2ee36b,#2f9bff,#b44dff) border-box;border:2px solid transparent;color:#fff}
#ethome .ffspin-prizes .pz.year b{color:#ffd84d}
#ethome .ffspin-prizes .pz.month{background:rgba(216,20,111,.28);border-color:rgba(255,111,176,.7)}
#ethome .ffspin-prizes .pz.month b{color:#ff9fcb}
#ethome .ffspin-cta{display:flex;align-items:center;gap:22px;margin-top:20px;flex-wrap:wrap}
#ethome .ffspin-btn{position:relative;overflow:hidden;display:inline-flex;align-items:center;justify-content:center;gap:10px;font:900 20px/1 var(--sans);letter-spacing:.06em;padding:20px 38px;border-radius:100rem;border:0;cursor:pointer;color:#1b2a5c;background:linear-gradient(180deg,#ffd75e,#ffc107 55%,#f0a900);box-shadow:0 0 0 0 rgba(255,193,7,.55),0 12px 28px rgba(255,193,7,.38),inset 0 -4px 0 rgba(0,0,0,.14);animation:ffpulse 1.8s ease-out infinite;transition:transform .15s ease}
@keyframes ffpulse{0%{box-shadow:0 0 0 0 rgba(255,193,7,.6),0 12px 28px rgba(255,193,7,.38),inset 0 -4px 0 rgba(0,0,0,.14)}70%{box-shadow:0 0 0 18px rgba(255,193,7,0),0 12px 28px rgba(255,193,7,.38),inset 0 -4px 0 rgba(0,0,0,.14)}100%{box-shadow:0 0 0 0 rgba(255,193,7,0),0 12px 28px rgba(255,193,7,.38),inset 0 -4px 0 rgba(0,0,0,.14)}}
#ethome .ffspin-btn:hover{transform:translateY(-2px) scale(1.03)}
#ethome .ffspin-btn:active{transform:scale(.97)}
#ethome .ffspin-btn[disabled]{animation:none;opacity:.55;cursor:default;transform:none}
#ethome .ffspin-btn .shine{position:absolute;top:0;left:-70%;width:45%;height:100%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.65),transparent);transform:skewX(-20deg);animation:ffshine 2.6s ease-in-out infinite}
@keyframes ffshine{0%{left:-70%}45%{left:130%}100%{left:130%}}
#ethome .ffspin-btn .ar{font-size:22px;animation:ffspinicon 2.6s linear infinite}
@keyframes ffspinicon{from{transform:rotate(0)}to{transform:rotate(360deg)}}
#ethome .ffspin-meta{display:flex;flex-direction:column;gap:5px}
#ethome .ffspin-count{display:inline-flex;align-items:center;gap:8px;font-weight:800;font-size:13px;color:rgba(255,255,255,.8)}
#ethome .ffspin-count .num{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-weight:800;font-size:15px;color:#fff;background:rgba(0,0,0,.28);border:1px solid rgba(255,255,255,.14);padding:3px 9px;border-radius:8px;letter-spacing:.06em}
#ethome .ffspin-once{font-weight:700;font-size:12.5px;color:rgba(255,255,255,.62)}
/* result state */
#ethome .ffspin-result{display:none;position:relative;z-index:2;color:#fff}
#ethome .ffspin.done .ffspin-body{display:none}
#ethome .ffspin.done .ffspin-result{display:block;animation:ffrise .55s cubic-bezier(.2,.9,.3,1.2) both}
@keyframes ffrise{from{opacity:0;transform:translateY(18px) scale(.96)}to{opacity:1;transform:none}}
#ethome .ffspin-rkick{font-weight:900;font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:#ffd043;margin-bottom:8px}
#ethome .ffspin-rtitle{font-weight:900;font-size:clamp(28px,3vw,42px);line-height:1.02;letter-spacing:-.015em;margin-bottom:10px}
#ethome .ffspin-rtitle .big{color:#ffc107;text-shadow:0 0 22px rgba(255,193,7,.6);font-size:1.15em}
#ethome .ffspin-rtitle .big.rain{background:linear-gradient(90deg,#ff4d6d,#ff9f1c,#ffe03d,#4ade80,#38bdf8,#c084fc,#ff4d6d);background-size:200% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;text-shadow:none;filter:drop-shadow(0 0 10px rgba(255,255,255,.35));animation:ffrain 3s linear infinite}
#ethome .ffspin-rlede{font-weight:700;font-size:16.5px;line-height:1.5;color:rgba(255,255,255,.86);max-width:56ch}
#ethome .ffspin-code{display:inline-flex;align-items:center;gap:12px;margin:16px 0 8px;background:#fff;border-radius:14px;padding:10px 12px 10px 18px;box-shadow:0 10px 26px rgba(0,0,0,.3);animation:ffcode .6s cubic-bezier(.2,.9,.3,1.3) .25s both}
@keyframes ffcode{from{opacity:0;transform:scale(.7) rotate(-3deg)}to{opacity:1;transform:none}}
#ethome .ffspin-code code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-weight:800;font-size:24px;letter-spacing:.08em;color:#1b2a5c}
#ethome .ffspin-copy{font:900 13px var(--sans);background:#1b2a5c;color:#fff;border:0;border-radius:100rem;padding:9px 14px;cursor:pointer}
#ethome .ffspin-copy.ok{background:#00b09b}
#ethome .ffspin-ractions{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin-top:14px}
#ethome .ffspin-use{display:inline-flex;align-items:center;gap:8px;font:900 17px var(--sans);padding:16px 30px;border-radius:100rem;background:linear-gradient(180deg,#ffd75e,#ffc107 55%,#f0a900);color:#1b2a5c;box-shadow:0 12px 28px rgba(255,193,7,.38),inset 0 -4px 0 rgba(0,0,0,.14);transition:transform .15s ease}
#ethome .ffspin-use:hover{transform:translateY(-2px);color:#1b2a5c}
#ethome .ffspin-use.teal{background:linear-gradient(180deg,#19c9b1,#00b09b 55%,#00897b);color:#fff;box-shadow:0 12px 28px rgba(0,176,155,.38),inset 0 -4px 0 rgba(0,0,0,.14)}
#ethome .ffspin-quiet{font-weight:800;font-size:14.5px;color:#fff;text-decoration:underline;text-underline-offset:4px;opacity:.85}
#ethome .ffspin-fine{font-weight:600;font-size:12.5px;line-height:1.5;color:rgba(255,255,255,.62);margin-top:12px}
#ethome .ffspin-claim{display:flex;gap:8px;margin-top:14px;max-width:460px}
#ethome .ffspin-claim input{flex:1;font:700 15px var(--sans);padding:14px 16px;border:0;border-radius:100rem;min-width:0}
#ethome .ffspin-claim button{font:900 15px var(--sans);background:linear-gradient(180deg,#ffd75e,#ffc107 55%,#f0a900);color:#1b2a5c;border:0;border-radius:100rem;padding:14px 20px;cursor:pointer}
#ethome .ffspin-fineline{grid-column:1 / -1;position:relative;z-index:2;font-weight:600;font-size:12px;line-height:1.5;color:rgba(255,255,255,.5);border-top:1px solid rgba(255,255,255,.12);padding-top:12px;margin-top:6px}
#ethome .ffspin-fineline a{color:rgba(255,255,255,.7);text-decoration:underline;text-underline-offset:3px}
#ethome .ffspin.shake{animation:ffshake .6s ease-in-out}
@keyframes ffshake{0%,100%{transform:none}20%{transform:translate(-4px,2px) rotate(-.3deg)}40%{transform:translate(4px,-2px) rotate(.3deg)}60%{transform:translate(-3px,1px)}80%{transform:translate(3px,-1px)}}
@media(max-width:1100px){#ethome .ffspin{grid-template-columns:360px 1fr;gap:10px 22px}#ethome .ffspin-wheelwrap{width:340px;height:340px}#ethome .ffspin-wheel,#ethome .ffspin-flash{width:300px;height:300px}#ethome .ffspin-glow{left:190px}#ethome .ffspin-hub{width:66px;height:66px}#ethome .ffspin-hub img{width:42px}}
@media(max-width:760px){#ethome .ffspin-wrap{padding:16px 12px 0}#ethome .ffspin{grid-template-columns:1fr;text-align:center;padding:22px 16px 18px}#ethome .ffspin-glow{left:50%;top:190px}#ethome .ffspin-wheelwrap{width:330px;height:330px}#ethome .ffspin-wheel,#ethome .ffspin-flash{width:290px;height:290px}#ethome .ffspin-lede,#ethome .ffspin-rtitle .big.rain{background:linear-gradient(90deg,#ff4d6d,#ff9f1c,#ffe03d,#4ade80,#38bdf8,#c084fc,#ff4d6d);background-size:200% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;text-shadow:none;filter:drop-shadow(0 0 10px rgba(255,255,255,.35));animation:ffrain 3s linear infinite}
#ethome .ffspin-rlede{margin:0 auto}#ethome .ffspin-prizes,#ethome .ffspin-ractions,#ethome .ffspin-cta,#ethome .ffspin-kicker{justify-content:center}#ethome .ffspin-meta{align-items:center}#ethome .ffspin-claim{margin:14px auto 0}#ethome .ffspin-kicker .sep{display:none}}
@media(prefers-reduced-motion:reduce){#ethome .ffspin-wheel.idle,#ethome .ffspin-btn,#ethome .ffspin-btn .shine,#ethome .ffspin-btn .ar,#ethome .ffspin-title .big,#ethome .ffspin-glow{animation:none}}

#ethome .ffspin-sound{position:absolute;right:6px;bottom:2px;z-index:5;font:800 11px "Nunito Sans",system-ui,sans-serif;color:rgba(255,255,255,.75);background:rgba(0,0,0,.28);border:1px solid rgba(255,255,255,.18);border-radius:100rem;padding:5px 10px;cursor:pointer}
#ethome .ffspin-err{flex-basis:100%;font-weight:800;font-size:13.5px;color:#ffd0c8;background:rgba(252,85,70,.18);border:1px solid rgba(252,85,70,.5);border-radius:10px;padding:8px 12px}
#ethome .ffspin-edu{display:flex;align-items:center;gap:8px;margin-top:10px;font-weight:700;font-size:14px;color:rgba(255,255,255,.9);cursor:pointer}
#ethome .ffspin-edu input{width:18px;height:18px;accent-color:#ffc107}
#ethome .ffspin-mount:empty{display:none}
@media(max-width:760px){#ethome .ffspin-edu{justify-content:center}}