/**
 * COOBO — круглый переключатель тем (хаб + игры).
 */
.coobo-theme-cycle {
  --coobo-theme-cycle-size: 40px;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--coobo-theme-cycle-size);
  height: var(--coobo-theme-cycle-size);
  padding: 0;
  border: 2px solid var(--coobo-line);
  border-radius: 50%;
  background: var(--coobo-surface);
  color: var(--coobo-surface-text, var(--coobo-text));
  cursor: pointer;
  flex-shrink: 0;
  box-shadow: var(--coobo-shadow-sm, 0 2px 8px rgba(0, 0, 0, 0.12));
  transition: border-color 0.15s, color 0.15s, background 0.15s, box-shadow 0.15s, transform 0.1s;
}

.coobo-theme-cycle:hover {
  border-color: color-mix(in oklab, var(--coobo-accent) 50%, var(--coobo-line));
  color: var(--coobo-accent);
  box-shadow: var(--coobo-shadow-glow, 0 0 12px color-mix(in oklab, var(--coobo-accent) 35%, transparent));
}

.coobo-theme-cycle:active {
  transform: scale(0.94);
}

.coobo-theme-cycle:focus-visible {
  outline: 2px solid var(--coobo-accent);
  outline-offset: 2px;
}

.coobo-theme-cycle--float {
  position: fixed;
  left: max(12px, env(safe-area-inset-left));
  bottom: max(12px, env(safe-area-inset-bottom));
  z-index: 12;
  background: var(--coobo-hud-bg, var(--coobo-surface));
  backdrop-filter: blur(8px);
  pointer-events: auto;
}

.coobo-theme-cycle--hud {
  background: var(--coobo-hud-bg, var(--coobo-surface));
}

.coobo-theme-cycle__icon {
  display: block;
  width: 20px;
  height: 20px;
  background-color: currentColor;
  mask-size: contain;
  mask-repeat: no-repeat;
  mask-position: center;
  -webkit-mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
}

.coobo-theme-cycle[data-theme="dark"] .coobo-theme-cycle__icon {
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cpath d='M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z'/%3E%3C/svg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cpath d='M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z'/%3E%3C/svg%3E");
}

.coobo-theme-cycle[data-theme="light"] .coobo-theme-cycle__icon {
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='4' fill='black' stroke='none'/%3E%3Cpath d='M12 2v2M12 20v2M4.93 4.93l1.41 1.41M17.66 17.66l1.41 1.41M2 12h2M20 12h2M4.93 19.07l1.41-1.41M17.66 6.34l1.41-1.41'/%3E%3C/svg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='4' fill='black' stroke='none'/%3E%3Cpath d='M12 2v2M12 20v2M4.93 4.93l1.41 1.41M17.66 17.66l1.41 1.41M2 12h2M20 12h2M4.93 19.07l1.41-1.41M17.66 6.34l1.41-1.41'/%3E%3C/svg%3E");
}

.coobo-theme-cycle[data-theme="yinyang"] .coobo-theme-cycle__icon {
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='10' fill='black'/%3E%3Cpath d='M12 2a10 10 0 0 1 0 20V2z' fill='white'/%3E%3Ccircle cx='12' cy='8' r='2' fill='white'/%3E%3Ccircle cx='12' cy='16' r='2' fill='black'/%3E%3C/svg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='10' fill='black'/%3E%3Cpath d='M12 2a10 10 0 0 1 0 20V2z' fill='white'/%3E%3Ccircle cx='12' cy='8' r='2' fill='white'/%3E%3Ccircle cx='12' cy='16' r='2' fill='black'/%3E%3C/svg%3E");
}

.coobo-theme-cycle[data-theme="dark"] {
  border-color: color-mix(in oklab, #6b7a94 70%, var(--coobo-line));
}

.coobo-theme-cycle[data-theme="light"] {
  border-color: color-mix(in oklab, #f5c842 55%, var(--coobo-line));
  color: #e8a317;
}

.coobo-theme-cycle[data-theme="yinyang"] {
  border-color: color-mix(in oklab, var(--coobo-accent, #ff6000) 45%, var(--coobo-line));
}

@media (max-width: 520px) {
  .coobo-theme-cycle--float {
    --coobo-theme-cycle-size: 44px;
  }

  .coobo-theme-cycle--float .coobo-theme-cycle__icon {
    width: 22px;
    height: 22px;
  }
}