:root{}

#viewSpin .spin-layout{
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:16px;
  justify-items:center;
  align-items:center;
  padding-top:var(--appbar-h);
  height:calc(100dvh - var(--appbar-h));
  padding-left:16px;
  padding-right:16px;
  padding-bottom:16px;
  overflow:hidden;
}
#viewSpin .spin-stage{display:grid;place-items:center;width:100%;height:100%}
#viewSpin .spin-wheel-wrap{
  position:relative;
  width:auto;
  height:auto;
  aspect-ratio:1/1;
  display:grid;
  place-items:center;
}
#viewSpin .spin-banner{
  position:absolute;
  top:4%;
  left:50%;
  transform:translateX(-50%);
  background:rgba(9,26,26,.7);
  border:1px solid #134;
  color:var(--text);
  padding:6px 10px;
  border-radius:10px;
  box-shadow:var(--shadow);
  pointer-events:none;
  font-weight:700;
  letter-spacing:.5px;
  z-index:2;
}
#viewSpin .spin-result-pointer{
  position:absolute;
  width:0;height:0;
  border-top:10px solid transparent;
  border-bottom:10px solid transparent;
  border-left:16px solid #ff3b3b;
  filter:drop-shadow(0 0 3px rgba(0,0,0,.6));
  z-index:3;
}
#viewSpin .spin-pointer{ display:none }
#viewSpin canvas{display:block;max-width:100%;max-height:100%}
#viewSpin .spin-center{position:absolute;inset:0;margin:auto;width:46%;height:46%;max-width:220px;max-height:220px;border-radius:999px;border:none;color:#d6fffb;background:rgba(2,44,34,.7);backdrop-filter:blur(2px);box-shadow:0 2px 8px rgba(0,0,0,.4) inset,var(--shadow)}
#viewSpin .spin-center:active{transform:scale(.98)}
#viewSpin .spin-panel{display:grid;grid-template-rows:auto 1fr auto;gap:8px;width:100%;max-width:720px;height:100%;align-content:stretch}
#viewSpin .spin-items{width:100%;height:100%;min-height:0;padding:10px 12px;border-radius:12px;border:1px solid #134;background:#082020;color:var(--text);resize:none;overflow:auto;font-size:14px;line-height:1.35}
#viewSpin .spin-opt{display:flex;align-items:center;gap:8px;opacity:.9}
@media (min-width:880px){
  #viewSpin .spin-layout{grid-template-columns:minmax(0,1fr) clamp(320px,32vw,420px)}
  #viewSpin .spin-panel{width:auto;max-width:none;justify-self:stretch}
}