/* The full-height end caps keep their original aspect; only the center expands. */
/* Match the former painted button height, including its gold rim. */
.reference-stage .hanging-sign #spin {
  position:relative;
  top:-.598086cqw;
  height:4.784689cqw;
  appearance:none;
  -webkit-appearance:none;
  -webkit-tap-highlight-color:transparent;
  border:0;
  border-radius:0;
  background:transparent;
  background-image:none;
  box-shadow:none;
  overflow:visible;
  isolation:isolate;
  opacity:1;
  filter:none;
  transform:none;
  transition:transform .12s ease;
  text-shadow:0 2px 2px #000,0 0 5px #0009;
}
.reference-stage .hanging-sign #spin::before,
.reference-stage .hanging-sign #spin::after {
  content:none;
  display:none;
  border:0;
  background:none;
  box-shadow:none;
}
.spin-button-art {
  position:absolute;
  inset:0;
  display:block;
  width:100%;
  height:100%;

  pointer-events:none;
  user-select:none;
  -webkit-user-drag:none;
  z-index:0;
  /* One immediate hover state, including rapid pointer exits and re-entries. */
  filter:brightness(1) saturate(1);
  transition:none;
  container-type:size;
}
.spin-button-art::before {
  content:'';
  position:absolute;
  inset:0;
  display:block;
  box-sizing:border-box;
  border:1px solid transparent;
  border-image-source:url('../assets/spin-button.webp');
  border-image-slice:0 340 fill;
  border-image-width:0 calc(100cqh * 340 / 406);
  border-image-repeat:stretch;
}
.reference-stage .hanging-sign #spin > span:not(.spin-button-art) {
  position:relative;
  z-index:1;
}
/* Longer status labels sit inside the illustrated inset without the spin icon. */
.reference-stage .hanging-sign #spin[data-label-size="compact"] > span:last-child {
  font-size:.65em;
  letter-spacing:.04em;
  line-height:1;
  white-space:nowrap;
  min-width:0;
}
.reference-stage .hanging-sign #spin[data-label-size="compact"] > .spin-glyph {
  display:none;
}
.reference-stage .hanging-sign #spin:not(:disabled):hover {
  filter:none;
}
.reference-stage .hanging-sign #spin:not(:disabled):hover .spin-button-art {
  filter:brightness(1.1) saturate(1.05);
}
.reference-stage .hanging-sign #spin:not(:disabled):active {
  transform:translateY(1px);
}
.reference-stage .hanging-sign #spin:focus-visible {
  outline:2px solid #fff0b1;
  outline-offset:3px;
  border-radius:8px;
}
.reference-stage .hanging-sign #spin:disabled {
  opacity:1;
  filter:none;
  cursor:default;
}
.reference-stage .hanging-sign #spin:disabled .spin-button-art {
  filter:saturate(.5) brightness(.76);
}
.reference-stage .hanging-sign #spin:disabled > span:not(.spin-button-art) {
  color:#dfd6b6;
  opacity:.82;
}
.reduced-motion .spin-button-art { transition:none; }

@media (max-width:900px) and (orientation:portrait) {
  .reference-stage .hanging-sign #spin {
    top:calc(-1 * min(6px,clamp(4px,1.2vw,7px)));
    height:calc(clamp(48px,14vw,66px) + 6px);
  }
}


/* SPEED UP is an active presentation action, with the same type size and end caps as SPIN. */
.reference-stage .hanging-sign #spin.is-speed-up .spin-button-art::before{filter:url(#spin-purple-inlay)}
.reference-stage .hanging-sign #spin.is-speed-up>.spin-label{white-space:nowrap}
.reference-stage .hanging-sign #spin.is-speed-up{cursor:pointer}
.reference-stage .hanging-sign #spin.is-speed-up:disabled .spin-button-art{filter:none}
.reference-stage .hanging-sign #spin.is-speed-up:disabled>span:not(.spin-button-art){color:#fff2bf;opacity:1}

/* Portrait action faces use a crisp shared bevel, with fixed-size corners.
   The face is painted by CSS, so no square artwork is stretched across SPIN. */
#game.mobile-layout:not(.landscape-main) .mobile-spin-actions{
  --mobile-action-frame:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22512%22%20height%3D%22512%22%20viewBox%3D%220%200%20512%20512%22%3E%3Cdefs%3E%3ClinearGradient%20id%3D%22gold%22%20x1%3D%220%22%20y1%3D%220%22%20x2%3D%22.2%22%20y2%3D%221%22%20gradientUnits%3D%22objectBoundingBox%22%3E%3Cstop%20stop-color%3D%22%23fff2b0%22%2F%3E%3Cstop%20offset%3D%22.13%22%20stop-color%3D%22%23eac568%22%2F%3E%3Cstop%20offset%3D%22.43%22%20stop-color%3D%22%23a36c1e%22%2F%3E%3Cstop%20offset%3D%22.64%22%20stop-color%3D%22%23f2cf72%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%239d671e%22%2F%3E%3C%2FlinearGradient%3E%3ClinearGradient%20id%3D%22inner%22%20x2%3D%220%22%20y2%3D%221%22%3E%3Cstop%20stop-color%3D%22%23634112%22%2F%3E%3Cstop%20offset%3D%22.5%22%20stop-color%3D%22%23b77c26%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%23f5d78a%22%2F%3E%3C%2FlinearGradient%3E%3Cmask%20id%3D%22rim%22%3E%3Crect%20width%3D%22512%22%20height%3D%22512%22%20fill%3D%22white%22%2F%3E%3Crect%20x%3D%2243%22%20y%3D%2243%22%20width%3D%22426%22%20height%3D%22426%22%20rx%3D%2229%22%20fill%3D%22black%22%2F%3E%3C%2Fmask%3E%3C%2Fdefs%3E%3Cg%20mask%3D%22url%28%23rim%29%22%3E%3Crect%20x%3D%229%22%20y%3D%229%22%20width%3D%22494%22%20height%3D%22494%22%20rx%3D%2258%22%20fill%3D%22%2326190d%22%2F%3E%3Crect%20x%3D%2213%22%20y%3D%2211%22%20width%3D%22486%22%20height%3D%22486%22%20rx%3D%2255%22%20fill%3D%22url%28%23gold%29%22%20stroke%3D%22%23f9dfa0%22%20stroke-width%3D%223%22%2F%3E%3Crect%20x%3D%2225%22%20y%3D%2224%22%20width%3D%22462%22%20height%3D%22462%22%20rx%3D%2245%22%20fill%3D%22none%22%20stroke%3D%22%23755017%22%20stroke-width%3D%225%22%2F%3E%3Crect%20x%3D%2232%22%20y%3D%2231%22%20width%3D%22448%22%20height%3D%22448%22%20rx%3D%2240%22%20fill%3D%22none%22%20stroke%3D%22url%28%23inner%29%22%20stroke-width%3D%228%22%2F%3E%3Crect%20x%3D%2239%22%20y%3D%2239%22%20width%3D%22434%22%20height%3D%22434%22%20rx%3D%2233%22%20fill%3D%22none%22%20stroke%3D%22%23261c0d%22%20stroke-width%3D%225%22%2F%3E%3Cpath%20d%3D%22M74%2017H438M74%20491H438%22%20fill%3D%22none%22%20stroke%3D%22%23ffe9a7%22%20stroke-width%3D%222%22%20opacity%3D%22.8%22%2F%3E%3Cg%20fill%3D%22%23f9dfa0%22%20stroke%3D%22%2377521b%22%20stroke-width%3D%223%22%3E%3Ccircle%20cx%3D%2239%22%20cy%3D%2239%22%20r%3D%226%22%2F%3E%3Ccircle%20cx%3D%22473%22%20cy%3D%2239%22%20r%3D%226%22%2F%3E%3Ccircle%20cx%3D%2239%22%20cy%3D%22473%22%20r%3D%226%22%2F%3E%3Ccircle%20cx%3D%22473%22%20cy%3D%22473%22%20r%3D%226%22%2F%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E");
}
#game.mobile-layout:not(.landscape-main) .reference-stage .hanging-sign #spin .spin-button-art::before{
  --action-light:#0b7547;
  --action-dark:#042e21;
  border-image-source:var(--mobile-action-frame);
  border-image-slice:128;
  border-image-width:calc(100cqh / 4);
  border-radius:calc(100cqh * .12);
  background:linear-gradient(180deg,#ffffff26 0%,#ffffff08 38%,#00000012 51%,transparent 80%),radial-gradient(ellipse at 42% 0%,#70ffc929,transparent 72%),linear-gradient(145deg,var(--action-light),var(--action-dark));
  box-shadow:0 2px 3px #0007,inset 0 -3px 8px #0003;
  filter:none;
}
#game.mobile-layout:not(.landscape-main) .reference-stage .hanging-sign #spin.is-speed-up .spin-button-art::before{
  --action-light:#8245b5;
  --action-dark:#321250;
  background:linear-gradient(180deg,#ffffff2b 0%,#ffffff08 38%,#00000012 51%,transparent 80%),radial-gradient(ellipse at 42% 0%,#f0beff2c,transparent 72%),linear-gradient(145deg,var(--action-light),var(--action-dark));
  filter:none;
}

/* SVG strokes need their own equivalent of the label's black text shadows. */
.reference-stage .hanging-sign #spin>.spin-glyph>.control-icon{
  filter:drop-shadow(0 2px 2px #000) drop-shadow(0 0 5px #0009);
}