/* Desktop-only layer. Important: we do NOT hijack wheel scrolling over the content card. */

body.isDesktop{
  height: 100vh;
  overflow: hidden; /* page doesn't scroll, only the content card does */
}

.main{
  padding: 24px 22px 22px;
  max-width: 1280px;
}

.layout{
  grid-template-columns: 620px 1fr;
  gap: 22px;
  align-items: stretch;
}

.wheelWrap{
  display:block;
  position: relative;
  border-radius: 30px;
  padding: 20px;
  background: rgba(10,5,22,.14);
  border: 1px solid rgba(165,107,255,.10);
  box-shadow: var(--shadow);
  overflow:hidden;
  min-height: 640px;
}

.wheelGlow{
  position:absolute;
  inset: -40%;
  background:
    radial-gradient(circle at 30% 35%, rgba(165,107,255,.18), transparent 60%),
    radial-gradient(circle at 72% 30%, rgba(91,44,255,.14), transparent 62%),
    radial-gradient(circle at 52% 72%, rgba(165,107,255,.10), transparent 60%);
  filter: blur(42px);
  opacity: .9;
  pointer-events:none;
}

.wheel{
  position: relative;
  width: min(610px, 100%);
  margin: 0 auto;
  aspect-ratio: 1 / 1;
  --r: 220px;
  --beam: -90deg;
}

.ring{
  position:absolute;
  inset: 18%;
  border-radius: 999px;
  border: 1px solid rgba(165,107,255,.14);
  box-shadow: 0 0 0 1px rgba(91,44,255,.08) inset;
}
.ring::before{
  content:"";
  position:absolute;
  inset: -10%;
  border-radius: 999px;
  border: 1px solid rgba(165,107,255,.08);
}
.ring::after{
  content:"";
  position:absolute;
  inset: 18%;
  border-radius: 999px;
  border: 1px solid rgba(165,107,255,.10);
  opacity:.8;
}

.wheel__beam{
  position:absolute;
  left: 50%;
  top: 50%;
  width: 2px;
  height: 44%;
  transform-origin: bottom;
  transform: translate(-50%, -100%) rotate(var(--beam));
  background: linear-gradient(180deg, rgba(165,107,255,0), rgba(165,107,255,.55));
  filter: drop-shadow(0 0 16px rgba(165,107,255,.45));
  opacity: .75;
}

.node{
  position:absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%) rotate(var(--ang)) translate(var(--r)) rotate(calc(var(--ang) * -1));
  display:flex;
  align-items:center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 999px;
  border: 1px solid rgba(165,107,255,.12);
  background: rgba(10,5,22,.20);
  color: rgba(242,237,255,.86);
  cursor:pointer;
  user-select:none;
  transition: transform .22s ease, background .22s ease, border-color .22s ease, box-shadow .22s ease;
  backdrop-filter: blur(14px);
}
.node:hover{
  background: rgba(165,107,255,.08);
  border-color: rgba(165,107,255,.22);
  transform: translate(-50%, -50%) rotate(var(--ang)) translate(var(--r)) rotate(calc(var(--ang) * -1)) translateY(-1px);
}
.node.is-active{
  background: linear-gradient(135deg, rgba(165,107,255,.20), rgba(91,44,255,.08));
  border-color: rgba(165,107,255,.24);
  box-shadow: 0 22px 90px rgba(91,44,255,.22);
}

.node__dot{
  width: 10px;
  height: 10px;
  border-radius: 99px;
  background: rgba(242,237,255,.22);
  box-shadow: 0 0 0 3px rgba(165,107,255,.10), 0 0 22px rgba(165,107,255,.20);
}
.node.is-active .node__dot{
  background: rgba(242,237,255,.85);
  box-shadow: 0 0 0 3px rgba(165,107,255,.16), 0 0 34px rgba(165,107,255,.30);
}
.node__label{ font-size: 13.5px; font-weight: 950; white-space: nowrap; }

.node[data-i="0"]{ --ang: -90deg; }
.node[data-i="1"]{ --ang: -22deg; }
.node[data-i="2"]{ --ang:  44deg; }
.node[data-i="3"]{ --ang: 118deg; }
.node[data-i="4"]{ --ang: 180deg; }

.wheel__hint{
  position:absolute;
  left: 50%;
  bottom: 16%;
  transform: translateX(-50%);
  padding: 9px 11px;
  border-radius: 999px;
  border: 1px solid rgba(165,107,255,.10);
  background: rgba(10,5,22,.16);
  color: rgba(242,237,255,.70);
  font-weight: 950;
  font-size: 12px;
  letter-spacing: .2px;
  user-select:none;
}

.tabsMobile{ display:none; }

.panel{
  height: 640px;
  display:flex;
  flex-direction: column;
}

.panelTop{ flex: 0 0 auto; }

.panelScroll{
  flex: 1 1 auto;
  overflow-y: auto;           /* this is the independent scrolling "card" */
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
}

/* nicer scrollbar */
.panelScroll::-webkit-scrollbar{ width: 10px; }
.panelScroll::-webkit-scrollbar-thumb{
  background: rgba(165,107,255,.22);
  border-radius: 999px;
  border: 2px solid rgba(10,5,22,.55);
}
.panelScroll::-webkit-scrollbar-track{
  background: rgba(10,5,22,.18);
  border-radius: 999px;
}

/* QR: two columns on desktop */
.qrGrid{
  grid-template-columns: 1fr 1fr;
}