/* Lightweight, lazy-mounted 17:30 IST Spin & Win preview invitation.
   Never blocks the portal's initial login or printing-tool startup. */
.skillo-spin-invite{
  position:fixed;
  inset:0;
  width:min(90vw,410px,82dvh);
  height:min(90vw,410px,82dvh);
  max-height:82dvh;
  max-width:410px;
  aspect-ratio:1;
  margin:auto;
  padding:0;
  box-sizing:border-box;
  border:1px solid rgba(251,225,172,.62);
  border-radius:20px;
  color:#f8fbff;
  /* Light glass effect: underlying portal remains subtle and out of focus. */
  background:linear-gradient(145deg,rgba(27,45,76,.83),rgba(14,27,51,.86) 54%,rgba(23,36,64,.83));
  -webkit-backdrop-filter:blur(12px) saturate(125%);
  backdrop-filter:blur(12px) saturate(125%);
  box-shadow:0 20px 72px rgba(4,12,28,.58),0 0 0 1px rgba(255,255,255,.11),inset 0 1px rgba(255,255,255,.14);
  overflow:hidden;
}
.skillo-spin-invite[open]{display:flex;flex-direction:column}
.skillo-spin-invite::backdrop{
  background:rgba(6,13,31,.53);
  -webkit-backdrop-filter:blur(7px);
  backdrop-filter:blur(7px);
}
.skillo-spin-invite-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  padding:7px 12px;
  background:linear-gradient(110deg,rgba(35,55,90,.77),rgba(55,41,75,.73));
  border-bottom:1px solid rgba(248,209,135,.38);
}
.skillo-spin-invite-header strong{
  color:#ffe29e;
  font:800 clamp(12px,2.8vw,15px)/1.3 system-ui,sans-serif;
  letter-spacing:.7px;
}
.skillo-spin-invite-close{
  border:1px solid #ffffff52;
  border-radius:50%;
  background:rgba(22,44,75,.64);
  color:#fff;
  font-size:22px;
  font-weight:500;
  line-height:1;
  width:30px;
  height:30px;
  flex-shrink:0;
  cursor:pointer;
}
.skillo-spin-invite-close:focus-visible{outline:3px solid #fff1aa;outline-offset:3px}
.skillo-spin-invite-note{
  padding:5px 10px;
  margin:0;
  color:#bdcfe8;
  text-align:center;
  font:500 10px/1.35 system-ui,sans-serif;
  background:rgba(12,29,55,.66);
}
.skillo-spin-invite-stage{
  box-sizing:border-box;
  min-height:0;
  flex:1 1 auto;
  padding:8px 10px 10px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:7px;
  overflow-y:auto;
  background:radial-gradient(ellipse at 50% 40%,rgba(45,75,118,.76) 0%,rgba(21,41,72,.72) 53%,rgba(8,23,47,.74) 100%);
}
.skillo-spin-invite-eyebrow{
  color:#ffda88;
  font:800 10px/1.3 system-ui,sans-serif;
  letter-spacing:2px;
  margin:0;
  text-align:center;
}
.skillo-spin-invite-wheel-area{
  position:relative;
  flex:0 0 auto;
  width:min(64%,240px,30dvh);
  min-width:0;
  aspect-ratio:1;
  isolation:isolate;
}
.skillo-spin-invite-disc{
  position:absolute;
  inset:0;
  border:6px solid #f3c46a;
  box-sizing:border-box;
  border-radius:50%;
  box-shadow:0 0 0 7px #131b32,0 0 28px #f2c35d69,inset 0 0 18px #0005;
  transition:transform 4s cubic-bezier(.12,.66,.12,1);
  will-change:transform;
}
.skillo-spin-invite-segment{
  position:absolute;
  color:#fff;
  font:800 clamp(8px,1.5vw,11px)/1.1 system-ui,sans-serif;
  text-align:center;
  text-shadow:0 1px 3px #000a;
  white-space:pre-line;
  width:27%;
  pointer-events:none;
  transform:translate(-50%,-50%);
}
.skillo-spin-invite-pointer{
  position:absolute;
  top:-16px;
  left:50%;
  transform:translateX(-50%);
  width:24px;
  height:33px;
  background:linear-gradient(#fff9c0,#f3b94e);
  clip-path:polygon(0 0,100% 0,50% 100%);
  filter:drop-shadow(0 3px 4px #000a);
  z-index:3;
}
.skillo-spin-invite-spin-button{
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
  z-index:4;
  display:grid;
  place-items:center;
  width:24%;
  aspect-ratio:1;
  border:4px solid #ffdda0;
  border-radius:50%;
  background:radial-gradient(circle at 40% 30%,#fff5bb,#e4a12e);
  box-shadow:0 2px 18px #0009;
  color:#1b2b47;
  font:900 clamp(12px,2.3vw,17px)/1 system-ui,sans-serif;
  cursor:pointer;
}
.skillo-spin-invite-spin-button:disabled{cursor:progress;opacity:.85}
.skillo-spin-invite-spin-button:focus-visible{outline:3px solid #fff;outline-offset:5px}
.skillo-spin-invite-result{
  color:#ffdf9d;
  background:rgba(9,24,43,.63);
  border:1px solid rgba(232,194,117,.38);
  box-shadow:inset 0 1px rgba(255,255,255,.08);
  border-radius:12px;
  padding:6px 10px;
  margin:0;
  min-height:32px;
  box-sizing:border-box;
  width:min(95%,420px);
  text-align:center;
  font:700 11px/1.35 system-ui,sans-serif;
}
@media(max-width:500px){
  .skillo-spin-invite{width:min(92vw,355px,84dvh);height:min(92vw,355px,84dvh);border-radius:16px}
  .skillo-spin-invite-header{padding:6px 9px}
  .skillo-spin-invite-header strong{font-size:12px}
  .skillo-spin-invite-note{font-size:9px;padding:4px 8px}
  .skillo-spin-invite-stage{min-height:0;gap:5px;padding:5px 7px 7px}
  .skillo-spin-invite-eyebrow{display:none}
  .skillo-spin-invite-wheel-area{width:min(62%,207px,27dvh);min-width:0}
  .skillo-spin-invite-segment{font-size:clamp(7px,2vw,10px)}
  .skillo-spin-invite-result{font-size:10px;min-height:29px;padding:4px 7px}
}
@media(max-height:500px){
  .skillo-spin-invite-stage{gap:4px;padding:4px 7px}
  .skillo-spin-invite-eyebrow{display:none}
  .skillo-spin-invite-wheel-area{width:min(55%,26dvh)}
}
@media(prefers-reduced-motion:reduce){
  .skillo-spin-invite::backdrop{-webkit-backdrop-filter:none;backdrop-filter:none}
  .skillo-spin-invite{-webkit-backdrop-filter:none;backdrop-filter:none}
  .skillo-spin-invite-disc{transition-duration:.15s;will-change:auto}
}