/* spin.css - Spin the Wheel (spin.php). Only loaded on that page.
   IT Hub palette (style.css :root) mixed with the Arizona@Work colors below,
   sampled from AWLogo.png / AWwallpaperShort.jpg. */
:root{
  --aw-navy:#283583; --aw-red:#D7222A; --aw-gold:#F9C440;
}
.wrap{max-width:1500px}
kbd{background:#fff;border:1px solid var(--line);border-bottom-width:2px;border-radius:5px;padding:0 6px;
    font-size:.82em;font-family:inherit;color:var(--navy)}
.sw-top{display:flex;justify-content:space-between;align-items:flex-end;gap:14px;flex-wrap:wrap}

/* ---------- the stage: wallpaper background, 16:9 like the meeting screen ---------- */
.sw-stage{position:relative;width:100%;aspect-ratio:16/9;min-height:540px;border-radius:18px;overflow:hidden;
  background:#fff url(assets/img/aw_wallpaper_nologo.jpg) right top/cover no-repeat;box-shadow:var(--shadow);
  margin:0 0 22px;outline:0;isolation:isolate;container-type:size}
.sw-stage:fullscreen{width:100vw;height:100vh;aspect-ratio:auto;border-radius:0;min-height:0}
.sw-stage:-webkit-full-screen{width:100vw;height:100vh;border-radius:0}

/* darkens the wallpaper while the wheel spins / the winner shows */
.sw-dim{position:absolute;inset:0;z-index:1;pointer-events:none;opacity:0;transition:opacity .6s;
  background:radial-gradient(60% 75% at 31% 56%,rgba(20,52,74,.55) 0%,rgba(7,26,39,.9) 70%,rgba(7,26,39,.96) 100%)}
.sw-stage.show .sw-dim{opacity:1}
/* light sweep across the stage while spinning */
.sw-sweep{position:absolute;inset:-20% -60%;z-index:2;pointer-events:none;opacity:0;
  background:linear-gradient(105deg,transparent 42%,rgba(255,255,255,.16) 48%,rgba(249,196,64,.2) 50%,rgba(255,255,255,.16) 52%,transparent 58%)}
.sw-stage.spinning .sw-sweep{opacity:1;animation:sw-sweep 1.6s linear infinite}
@keyframes sw-sweep{from{transform:translateX(-45%)}to{transform:translateX(45%)}}

.sw-head{position:absolute;left:3.2%;top:8.4%;z-index:6;max-width:58%;display:flex;flex-direction:column;align-items:flex-start;gap:.9cqh}
.sw-head h2{margin:0;font-size:clamp(1.1rem,2.7cqw,2.7rem);line-height:1.1;color:var(--aw-navy);font-weight:900;
  letter-spacing:-.01em;transition:color .5s;text-wrap:balance}
.sw-stage.show .sw-head h2{color:#fff;text-shadow:0 2px 14px rgba(0,0,0,.4)}
.sw-count{display:inline-block;background:var(--navy);color:#fff;border-radius:20px;padding:3px 12px;
  font-size:clamp(.72rem,1.05cqw,1rem);font-weight:700}
.sw-count b{color:var(--tan)}

/* ---------- the wheel ---------- */
.sw-zone{position:absolute;left:0;top:19%;bottom:2.5%;width:60%;z-index:5;display:flex;align-items:center;justify-content:center}
.sw-wheel{position:relative;width:min(74cqh,52cqw);aspect-ratio:1}
#wheel{position:absolute;inset:0;width:100%;height:100%;border-radius:50%;will-change:transform;
  box-shadow:0 0 0 .9cqh var(--navy),0 0 0 1.5cqh var(--aw-gold),0 1.6cqh 3.5cqh rgba(7,26,39,.45)}
.sw-rays{position:absolute;inset:-34%;border-radius:50%;z-index:-2;opacity:.18;pointer-events:none;
  background:repeating-conic-gradient(from 0deg,rgba(215,34,42,.95) 0deg 9deg,rgba(249,196,64,.95) 9deg 18deg);
  -webkit-mask:radial-gradient(circle,#000 22%,transparent 68%);mask:radial-gradient(circle,#000 22%,transparent 68%);
  animation:sw-turn 60s linear infinite;transition:opacity .6s}
.sw-stage.show .sw-rays{opacity:.75}
.sw-stage.spinning .sw-rays{animation-duration:4s}
@keyframes sw-turn{to{transform:rotate(360deg)}}
.sw-glow{position:absolute;inset:-6%;border-radius:50%;z-index:-1;pointer-events:none;opacity:0;transition:opacity .5s;
  background:radial-gradient(circle,rgba(249,196,64,.65) 55%,rgba(249,196,64,0) 70%)}
.sw-stage.spinning .sw-glow{opacity:1;animation:sw-pulse .5s ease-in-out infinite alternate}
@keyframes sw-pulse{from{transform:scale(.98)}to{transform:scale(1.04)}}
.sw-wheel.land #wheel{animation:sw-land .7s cubic-bezier(.3,1.6,.5,1)}
@keyframes sw-land{0%{scale:1}35%{scale:1.05}100%{scale:1}}

/* marquee bulbs around the rim */
.sw-bulbs{position:absolute;inset:0;pointer-events:none}
.sw-bulbs i{position:absolute;left:50%;top:50%;width:2.1%;height:2.1%;margin:-1.05%;border-radius:50%;
  background:#fff6d6;box-shadow:0 0 .6cqh #fff,0 0 1.4cqh var(--aw-gold);opacity:.55;
  animation:sw-twinkle 2.4s ease-in-out infinite}
.sw-bulbs i:nth-child(odd){animation-delay:-1.2s}
@keyframes sw-twinkle{50%{opacity:1}}
.sw-stage.spinning .sw-bulbs i{animation:sw-chase .36s steps(1) infinite}
.sw-stage.spinning .sw-bulbs i:nth-child(3n+1){animation-delay:-.12s}
.sw-stage.spinning .sw-bulbs i:nth-child(3n+2){animation-delay:-.24s}
@keyframes sw-chase{0%{opacity:1;background:#fff}33%{opacity:.25;background:var(--aw-gold)}66%{opacity:.25}}

.sw-pointer{position:absolute;right:-5.5%;top:50%;width:12%;margin-top:-4.4%;z-index:3;transform-origin:85% 50%;
  filter:drop-shadow(0 .4cqh .5cqh rgba(0,0,0,.35));transition:transform .09s ease-out}
.sw-pointer svg{display:block;width:100%;height:auto;transform:scaleX(-1)}
.sw-pointer.kick{transform:rotate(-22deg);transition:none}

.sw-hub{position:absolute;left:50%;top:50%;width:19%;aspect-ratio:1;transform:translate(-50%,-50%);z-index:4;
  border-radius:50%;border:.7cqh solid var(--aw-gold);cursor:pointer;color:#fff;font-weight:900;
  font-size:clamp(.8rem,2.2cqh,2rem);letter-spacing:.08em;font-family:inherit;
  background:radial-gradient(circle at 35% 30%,#3b4cb0 0%,var(--aw-navy) 45%,var(--navy) 100%);
  box-shadow:0 0 0 .5cqh #fff,0 .8cqh 2cqh rgba(0,0,0,.4),inset 0 -.6cqh 1.2cqh rgba(0,0,0,.35);
  transition:transform .15s,box-shadow .15s}
.sw-hub:hover:not(:disabled){transform:translate(-50%,-50%) scale(1.06)}
.sw-hub:active:not(:disabled){transform:translate(-50%,-50%) scale(.96)}
.sw-hub:disabled{cursor:default;filter:saturate(.6)}
.sw-stage:not(.spinning) .sw-hub:not(:disabled){animation:sw-breathe 2.2s ease-in-out infinite}
@keyframes sw-breathe{50%{box-shadow:0 0 0 .5cqh #fff,0 0 0 1.6cqh rgba(249,196,64,.45),0 .8cqh 2cqh rgba(0,0,0,.4),inset 0 -.6cqh 1.2cqh rgba(0,0,0,.35)}}

/* ---------- Arizona@Work logo, top right, with a few quiet effects:
   slow float, soft gold glow, a shine that passes over the logo every
   few seconds (masked to the logo's own shape), twinkling sparkles ---------- */
.sw-logo{position:absolute;right:3.5%;top:11%;width:33%;height:27%;z-index:1;display:flex;align-items:center;
  justify-content:center;pointer-events:none;animation:sw-lfloat 7s ease-in-out infinite}
@keyframes sw-lfloat{50%{transform:translateY(-.8cqh)}}
.sw-lbox{position:relative;width:100%}
.sw-lbox img{display:block;width:100%;height:auto;filter:drop-shadow(0 .5cqh .9cqh rgba(40,53,131,.18))}
.sw-lshine{position:absolute;inset:0;
  background:linear-gradient(110deg,transparent 35%,rgba(255,255,255,.85) 47%,rgba(255,240,200,.95) 50%,rgba(255,255,255,.85) 53%,transparent 65%) 0 0/300% 100% no-repeat;
  -webkit-mask:url(assets/img/aw_logo_clear.png) center/100% 100% no-repeat;mask:url(assets/img/aw_logo_clear.png) center/100% 100% no-repeat;
  animation:sw-lshine 7s ease-in-out 1.5s infinite}
@keyframes sw-lshine{0%{background-position:130% 0}28%,100%{background-position:-30% 0}}
.sw-lglow{position:absolute;left:44%;top:12%;width:26%;aspect-ratio:1;border-radius:50%;transform:translate(-50%,-30%);
  background:radial-gradient(circle,rgba(249,196,64,.55) 0%,rgba(249,196,64,.18) 45%,transparent 70%);
  animation:sw-lglow 5s ease-in-out infinite}
@keyframes sw-lglow{0%,100%{opacity:.35;transform:translate(-50%,-30%) scale(.9)}50%{opacity:.85;transform:translate(-50%,-30%) scale(1.12)}}
.sw-spark{position:absolute;width:1.8cqh;height:1.8cqh;opacity:0;
  clip-path:polygon(50% 0,61% 39%,100% 50%,61% 61%,50% 100%,39% 61%,0 50%,39% 39%);
  background:var(--aw-gold);animation:sw-spark 4.2s ease-in-out infinite}
.sw-spark.k1{left:47%;top:-4%;animation-delay:.2s}
.sw-spark.k2{left:58%;top:6%;width:1.2cqh;height:1.2cqh;background:var(--aw-red);animation-delay:1.6s}
.sw-spark.k3{left:-2%;top:30%;width:1.3cqh;height:1.3cqh;background:var(--aw-navy);animation-delay:2.7s}
.sw-spark.k4{right:-1%;top:22%;animation-delay:3.3s}
.sw-spark.k5{left:36%;bottom:4%;width:1.1cqh;height:1.1cqh;animation-delay:.9s}
.sw-spark.k6{right:14%;bottom:-2%;width:1.4cqh;height:1.4cqh;background:var(--aw-red);animation-delay:2.2s}
@keyframes sw-spark{0%,60%,100%{opacity:0;transform:scale(.2) rotate(0)}75%{opacity:.9;transform:scale(1) rotate(45deg)}}

/* ---------- winners column, under the logo ---------- */
.sw-winners{position:absolute;right:2.6%;top:41%;bottom:4%;width:34%;z-index:6;display:flex;flex-direction:column;
  background:rgba(10,37,54,.86);backdrop-filter:blur(6px);border-radius:16px;color:#e7f2f8;
  padding:1.6cqh 1.4cqw;box-shadow:0 10px 30px rgba(7,26,39,.35);border-top:4px solid var(--tan)}
.sw-whead{display:flex;align-items:center;justify-content:space-between;margin:0 0 .8cqh}
.sw-whead h3{margin:0;font-size:clamp(.9rem,2.6cqh,1.6rem);color:#fff}
.sw-whead h3 b{background:var(--tan);color:var(--navy-dk);border-radius:20px;padding:0 .7em;font-size:.75em;vertical-align:middle;margin-left:4px}
.sw-mini{background:transparent;border:1px solid rgba(255,255,255,.25);color:#cfe3ee;border-radius:20px;
  padding:3px 12px;font-size:.78rem;font-weight:700;cursor:pointer}
.sw-mini:hover{background:rgba(255,255,255,.1);color:#fff}
.sw-wlist{list-style:none;margin:0;padding:0 4px 0 0;overflow-y:auto;flex:1;scrollbar-width:thin;scrollbar-color:#3a5a70 transparent}
.sw-wlist li{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:0 .8cqw;padding:.9cqh .6cqw;
  border-bottom:1px solid rgba(255,255,255,.08)}
.sw-wlist li:first-child{background:linear-gradient(90deg,rgba(224,169,109,.28),rgba(224,169,109,0));border-radius:10px}
.sw-wlist li.new{animation:sw-in .7s cubic-bezier(.2,1.4,.4,1)}
@keyframes sw-in{from{transform:translateX(40px);opacity:0}}
.sw-wlist .no{width:2.3em;height:2.3em;border-radius:50%;display:flex;align-items:center;justify-content:center;
  font-weight:800;font-size:clamp(.66rem,1.6cqh,.95rem);background:var(--aw-navy);color:#fff;border:2px solid var(--aw-gold)}
.sw-wlist .nm{font-weight:800;color:#fff;font-size:clamp(.85rem,2.3cqh,1.4rem);line-height:1.2;overflow-wrap:anywhere}
.sw-wlist .pz{display:block;font-weight:600;color:var(--tan);font-size:clamp(.7rem,1.6cqh,.95rem)}
.sw-wlist .tm{font-size:clamp(.62rem,1.4cqh,.82rem);color:#8fa9ba;text-align:right}
.sw-wlist .ud{display:block;margin:2px 0 0 auto;background:none;border:0;color:#7f9aac;cursor:pointer;font-size:.74rem;padding:0}
.sw-wlist .ud:hover{color:#fff;text-decoration:underline}
.sw-wempty{color:#8fa9ba;font-style:italic;margin:.6cqh 0 0;font-size:clamp(.8rem,1.9cqh,1.1rem)}

.sw-tools{position:absolute;left:1.6%;bottom:2.4%;z-index:7;display:flex;gap:8px}
.sw-tools button{width:42px;height:42px;border-radius:50%;border:0;cursor:pointer;color:#fff;
  background:rgba(10,37,54,.75);display:flex;align-items:center;justify-content:center;box-shadow:0 2px 8px rgba(0,0,0,.25)}
.sw-tools button:hover{background:var(--navy)}
#soundBtn .off,#soundBtn[aria-pressed=false] .on{display:none}
#soundBtn[aria-pressed=false] .off{display:inline}
#fsBtn .shrink{display:none}
.sw-stage:fullscreen #fsBtn .grow{display:none}
.sw-stage:fullscreen #fsBtn .shrink{display:inline}

/* fireworks / confetti / sparks layer - above the dimmed stage, under the winner card */
.sw-fx{position:absolute;inset:0;width:100%;height:100%;z-index:30;pointer-events:none}

/* ---------- winner reveal ---------- */
.sw-modal{position:absolute;inset:0;display:flex;align-items:center;justify-content:center}
.sw-modal[hidden]{display:none}
.sw-mback{position:absolute;inset:0;z-index:20;background:radial-gradient(circle,rgba(20,52,74,.6),rgba(7,26,39,.92));animation:sw-fade .4s}
.sw-mrays{position:absolute;z-index:21;left:50%;top:50%;width:150cqh;height:150cqh;margin:-75cqh;border-radius:50%;pointer-events:none;
  background:repeating-conic-gradient(rgba(249,196,64,.22) 0deg 7deg,transparent 7deg 18deg);
  -webkit-mask:radial-gradient(circle,#000 10%,transparent 62%);mask:radial-gradient(circle,#000 10%,transparent 62%);
  animation:sw-turn 22s linear infinite,sw-fade 1s}
@keyframes sw-fade{from{opacity:0}}
.sw-card{position:relative;z-index:40;text-align:center;background:#fff;border-radius:26px;
  padding:4cqh 5cqw 3.6cqh;max-width:78%;min-width:min(52%,560px);border-top:1.2cqh solid var(--aw-red);
  box-shadow:0 0 0 .8cqh var(--aw-gold),0 0 8cqh rgba(249,196,64,.55),0 3cqh 7cqh rgba(0,0,0,.5);
  animation:sw-pop .8s cubic-bezier(.2,1.6,.4,1) both}
.sw-card::before{content:"";position:absolute;left:0;right:0;top:-1.2cqh;height:.6cqh;background:var(--aw-navy);
  border-radius:0}
@keyframes sw-pop{0%{transform:scale(.2) rotate(-8deg);opacity:0}100%{transform:none;opacity:1}}
.sw-trophy{width:14cqh;margin:-12cqh auto 1cqh;animation:sw-bounce 1.1s .5s cubic-bezier(.3,1.8,.5,1) both,sw-float 2.4s 1.6s ease-in-out infinite}
.sw-trophy svg{display:block;width:100%;filter:drop-shadow(0 .8cqh 1cqh rgba(0,0,0,.3))}
@keyframes sw-bounce{0%{transform:translateY(-40cqh) scale(.4);opacity:0}100%{transform:none;opacity:1}}
@keyframes sw-float{50%{transform:translateY(-1.2cqh) rotate(3deg)}}
.sw-label{font-weight:900;letter-spacing:.35em;color:var(--aw-red);font-size:clamp(.9rem,3.2cqh,2.2rem);margin-right:-.35em}
.sw-label span{display:inline-block;animation:sw-letter .5s cubic-bezier(.2,1.8,.4,1) both}
@keyframes sw-letter{from{transform:translateY(-120%) scale(.4);opacity:0}}
.sw-name{font-weight:900;color:var(--aw-navy);font-size:clamp(1.8rem,10cqh,7.5rem);line-height:1.05;margin:1.2cqh 0 .6cqh;
  overflow-wrap:anywhere}
.sw-name span{display:inline-block;animation:sw-letter .55s cubic-bezier(.2,1.8,.4,1) both;white-space:pre}
.sw-name.shine{background:linear-gradient(100deg,var(--aw-navy) 40%,#6b7de0 50%,var(--aw-navy) 60%) 0 0/250% 100%;
  -webkit-background-clip:text;background-clip:text;color:transparent;animation:sw-shine 2.6s linear infinite}
.sw-name.shine span{animation:none}
@keyframes sw-shine{from{background-position:120% 0}to{background-position:-130% 0}}
.sw-mprize{display:inline-block;font-weight:800;color:var(--navy-dk);background:var(--tan);border-radius:30px;
  padding:.6cqh 2cqw;font-size:clamp(.9rem,3cqh,2rem);margin-top:.6cqh}
.sw-mprize:empty{display:none}
.sw-mbtns{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-top:3.4cqh}
.sw-done{background:var(--aw-red)}
.sw-done:hover{background:#a3161f}

.sw-toast{position:absolute;left:50%;bottom:4%;transform:translate(-50%,20px);z-index:50;background:var(--navy);color:#fff;
  padding:10px 18px;border-radius:30px;font-weight:700;font-size:.92rem;opacity:0;pointer-events:none;
  transition:opacity .3s,transform .3s;box-shadow:0 6px 20px rgba(0,0,0,.3);max-width:90%;text-align:center}
.sw-toast.on{opacity:1;transform:translate(-50%,0)}
.sw-toast.err{background:var(--red)}

/* ---------- management panels under the stage ---------- */
.sw-manage{display:grid;grid-template-columns:minmax(300px,420px) 1fr;gap:16px;align-items:start}
.sw-manage .panel{margin:0}
.sw-h2gap{margin-top:24px}
.sw-check{display:flex;gap:8px;align-items:center;font-weight:600;margin-top:12px}
.sw-check input{width:17px;height:17px}
textarea{width:100%;padding:11px 12px;border:1px solid #d3dbe0;border-radius:9px;font-size:.95rem;font-family:inherit;resize:vertical}
textarea:focus{outline:2px solid var(--blue-lt);border-color:var(--blue-lt)}
.sw-ncount{background:var(--blue-soft);color:var(--blue);border-radius:20px;padding:1px 10px;font-size:.8rem;margin-left:4px}
.sw-search{padding:7px 14px;border:1px solid var(--line);border-radius:20px;font-size:.88rem;min-width:200px}
.sw-names{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:6px;
  max-height:560px;overflow-y:auto}
.sw-names li{display:flex;align-items:center;gap:8px;background:var(--blue-soft);border-radius:9px;padding:6px 8px 6px 12px;font-size:.9rem}
.sw-names li .nm{flex:1;min-width:0;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sw-names li.won{background:#fdf3e4}
.sw-names li.off{background:#f1f1f1;color:var(--muted)}
.sw-names li.off .nm{text-decoration:line-through}
.sw-names button{background:none;border:0;cursor:pointer;color:var(--muted);font-size:.78rem;padding:2px 5px;border-radius:5px;font-weight:700}
.sw-names button:hover{background:#fff;color:var(--navy)}
.sw-names button.x:hover{color:var(--red)}
.pill.won{background:var(--tan);color:var(--navy-dk)}

.sw-import{position:fixed;inset:0;z-index:100;background:rgba(7,26,39,.6);display:flex;align-items:center;justify-content:center;padding:16px}
.sw-import[hidden]{display:none}
.sw-ibox{width:100%;max-width:620px;max-height:90vh;overflow:auto;margin:0}
.sw-imode{display:flex;flex-direction:column;gap:2px;background:var(--blue-soft);border-radius:10px;padding:10px 14px;margin:0 0 12px}
.sw-imode label{display:flex;gap:8px;align-items:center;margin:4px 0 0;font-weight:600}
.sw-ipreview{columns:2;column-gap:24px;max-height:300px;overflow:auto;margin:0;padding:10px 10px 10px 36px;
  background:#f7f9fa;border-radius:10px;font-size:.9rem}

/* ---------- cursor: a big hand on the stage (easy to see on the projector),
   hidden while the wheel spins, back once the winner shows ---------- */
.sw-stage,.sw-stage button,.sw-stage canvas,.sw-stage .sw-wlist .ud{
  cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 64 64'%3E%3Cpath d='M22 34V9a5 5 0 0 1 10 0v16a4.5 4.5 0 0 1 9 0v2a4.5 4.5 0 0 1 9 0v3a4 4 0 0 1 8 0v14c0 10-7 17-17 17h-8c-6 0-10-3-14-8L9 41a4.6 4.6 0 0 1 7-6l6 6z' fill='%23fff' stroke='%230A2536' stroke-width='3' stroke-linejoin='round'/%3E%3Cpath d='M32 25v8M41 27v7M50 30v6' stroke='%230A2536' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") 20 3,pointer}
.sw-stage.spinning,.sw-stage.spinning *{cursor:none!important}

/* phones / narrow windows: stack wheel, then winners */
@media (max-width:900px){
  .sw-stage:not(:fullscreen){aspect-ratio:auto;min-height:0;display:flex;flex-direction:column;container-type:inline-size;
    background-size:auto 260px;padding:0 0 70px}
  .sw-stage:not(:fullscreen) .sw-logo{position:relative;right:auto;top:auto;width:78%;height:auto;margin:44px auto 0}
  .sw-stage:not(:fullscreen) .sw-head{position:relative;left:auto;top:auto;max-width:none;padding:18px 16px 0}
  .sw-stage:not(:fullscreen) .sw-head h2{font-size:1.4rem}
  .sw-stage:not(:fullscreen) .sw-zone{position:relative;width:100%;top:auto;bottom:auto;padding:24px 0}
  .sw-stage:not(:fullscreen) .sw-wheel{width:min(82vw,520px);margin:0}
  .sw-stage:not(:fullscreen) .sw-winners{position:relative;right:auto;top:auto;bottom:auto;width:auto;margin:0 16px;
    padding:14px 16px;max-height:420px}
  .sw-stage:not(:fullscreen) #wheel{box-shadow:0 0 0 5px var(--navy),0 0 0 9px var(--aw-gold),0 10px 24px rgba(7,26,39,.45)}
  .sw-manage{grid-template-columns:1fr}
  .sw-ipreview{columns:1}
}
@media (prefers-reduced-motion:reduce){
  .sw-rays,.sw-bulbs i,.sw-hub,.sw-trophy,.sw-logo,.sw-lshine,.sw-lglow,.sw-spark{animation:none!important}
}