/* Generated character wheel integration.
   The fixed 45-degree sector order mirrors ARCHETYPES in app.js. */

@property --wheel-angle {
  syntax: "<angle>";
  inherits: true;
  initial-value: 0deg;
}

.wheel-shell {
  container-type: inline-size;
}

.wheel-disc {
  --wheel-angle: 0deg;
  width: 96%;
  overflow: visible;
  border: 0;
  background:
    url("./assets/wheel/character-wheel-1280.webp")
    center / contain
    no-repeat;
  box-shadow:
    0 0 42px rgba(var(--accent-rgb), 0.2),
    0 0 92px rgba(var(--accent-rgb), 0.1);
  transform: rotate(var(--wheel-angle));
  isolation: isolate;
}

.wheel-disc::before,
.wheel-disc::after,
.wheel-disc__lines {
  display: none;
}

.wheel-labels {
  z-index: 5;
}

.wheel-label {
  width: 104px;
  padding: 4px 6px;
  border: 1px solid rgba(var(--sector-color-rgb, 234, 247, 255), 0.13);
  background: rgba(2, 7, 13, 0.66);
  box-shadow:
    0 0 15px rgba(0, 0, 0, 0.72),
    inset 0 0 10px rgba(var(--sector-color-rgb, 234, 247, 255), 0.05);
  backdrop-filter: blur(4px);
  transform:
    translate(-50%, -50%)
    rotate(calc(var(--index) * 45deg))
    translateY(-35cqi)
    rotate(calc(var(--index) * -45deg - var(--wheel-angle)));
}

.wheel-label b {
  font-size: clamp(8px, 2.15cqi, 11px);
}

.wheel-label small {
  font-size: clamp(5px, 1.2cqi, 7px);
}

.wheel-label:nth-child(1) { --sector-color-rgb: 53, 199, 255; }
.wheel-label:nth-child(2) { --sector-color-rgb: 84, 243, 233; }
.wheel-label:nth-child(3) { --sector-color-rgb: 229, 216, 166; }
.wheel-label:nth-child(4) { --sector-color-rgb: 169, 140, 255; }
.wheel-label:nth-child(5) { --sector-color-rgb: 130, 185, 216; }
.wheel-label:nth-child(6) { --sector-color-rgb: 51, 231, 131; }
.wheel-label:nth-child(7) { --sector-color-rgb: 255, 140, 207; }
.wheel-label:nth-child(8) { --sector-color-rgb: 125, 153, 163; }

.wheel-disc__inner {
  width: 31%;
  border-color: rgba(var(--accent-rgb), 0.24);
  background: rgba(var(--night-rgb), 0.32);
  box-shadow: none;
  backdrop-filter: blur(2px);
}

.wheel-disc__eye,
.wheel-disc__inner small {
  display: none;
}

@media (max-width: 600px) {
  .wheel-disc {
    width: 98%;
  }

  .wheel-label {
    width: 78px;
    padding: 3px 4px;
    transform:
      translate(-50%, -50%)
      rotate(calc(var(--index) * 45deg))
      translateY(-35.5cqi)
      rotate(calc(var(--index) * -45deg - var(--wheel-angle)));
  }

  .wheel-label b {
    font-size: clamp(7px, 2.35cqi, 9px);
  }

  .wheel-label small {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .wheel-disc {
    filter: none;
  }
}