/* Cubiri Design System V1
   Semantic rule: gradient fill = primary action; gradient outline/glow = selected/active. */

:root {
  --cubiri-brand-purple: var(--purple, #8a00ff);
  --cubiri-brand-pink: var(--pink, #ff008a);
  --cubiri-brand-orange: var(--orange, #ff5a00);
  --cubiri-brand-gradient: linear-gradient(90deg, var(--cubiri-brand-purple), var(--cubiri-brand-pink), var(--cubiri-brand-orange));
  --cubiri-space-1: 4px;
  --cubiri-space-2: 8px;
  --cubiri-space-3: 12px;
  --cubiri-space-4: 16px;
  --cubiri-space-5: 20px;
  --cubiri-space-6: 24px;
  --cubiri-radius-control: 13px;
  --cubiri-radius-card: 18px;
  --cubiri-control-min-h: 44px;
  --cubiri-card-padding: 16px;
}

.cubiri-action-primary {
  min-height: var(--cubiri-control-min-h); border: 0; border-radius: var(--cubiri-radius-control);
  padding: 10px 14px; background: var(--cubiri-brand-gradient); color: #fff;
  font: inherit; font-weight: 800; cursor: pointer;
}
.cubiri-action-primary:active { transform: scale(.985); }
.cubiri-action-primary:disabled { opacity: .4; cursor: not-allowed; transform: none; }

.cubiri-action-secondary {
  min-height: var(--cubiri-control-min-h); border: 1px solid color-mix(in srgb, currentColor 16%, transparent);
  border-radius: var(--cubiri-radius-control); padding: 10px 14px;
  background: color-mix(in srgb, currentColor 8%, transparent); color: inherit;
  font: inherit; font-weight: 750; cursor: pointer;
}

.cubiri-action-destructive {
  min-height: var(--cubiri-control-min-h); border: 1px solid rgb(239 68 68 / .5);
  border-radius: var(--cubiri-radius-control); padding: 10px 14px;
  background: rgb(127 29 29 / .14); color: #ff7f7f;
  font: inherit; font-weight: 750; cursor: pointer;
}

.cubiri-option {
  position: relative; min-height: var(--cubiri-control-min-h);
  border: 1px solid color-mix(in srgb, currentColor 18%, transparent);
  border-radius: var(--cubiri-radius-control); padding: 8px 12px;
  background: color-mix(in srgb, currentColor 4%, transparent); color: inherit;
  font: inherit; font-weight: 750; cursor: pointer; isolation: isolate;
}
.cubiri-option::before {
  content: ""; position: absolute; inset: -2px; z-index: -1;
  border-radius: calc(var(--cubiri-radius-control) + 2px); padding: 2px;
  background: var(--cubiri-brand-gradient);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  opacity: 0; pointer-events: none;
}
.cubiri-option.is-selected,
.cubiri-option.is-active,
.cubiri-option[aria-pressed="true"],
.cubiri-option[aria-selected="true"] {
  border-color: transparent;
  background: color-mix(in srgb, currentColor 4%, transparent);
  color: inherit;
  box-shadow:
    0 0 10px color-mix(in srgb, var(--cubiri-brand-purple) 24%, transparent),
    0 0 14px color-mix(in srgb, var(--cubiri-brand-pink) 18%, transparent),
    0 0 18px color-mix(in srgb, var(--cubiri-brand-orange) 12%, transparent);
}
.cubiri-option.is-selected::before,
.cubiri-option.is-active::before,
.cubiri-option[aria-pressed="true"]::before,
.cubiri-option[aria-selected="true"]::before { opacity: 1; }
.cubiri-option:active { transform: scale(.98); }
.cubiri-option:disabled { opacity: .38; cursor: not-allowed; box-shadow: none; transform: none; }
.cubiri-option:disabled::before { opacity: 0; }

/* Reference migration: beat the retired 5SR currentColor/Canvas active style without !important. */
.five-sr-segmented button.cubiri-option.is-active,
.five-sr-number-choice button.cubiri-option.is-active {
  background: color-mix(in srgb, currentColor 4%, transparent);
  color: inherit;
}

.cubiri-option-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--cubiri-space-2); }
.cubiri-card {
  border: 1px solid color-mix(in srgb, currentColor 14%, transparent);
  border-radius: var(--cubiri-radius-card); padding: var(--cubiri-card-padding);
  background: color-mix(in srgb, currentColor 6%, transparent);
}

.cubiri-peer-choice { color: #fff; border: 0; }
.cubiri-peer-choice--purple { background: linear-gradient(135deg, color-mix(in srgb, var(--cubiri-brand-purple) 82%, #fff), var(--cubiri-brand-purple)); }
.cubiri-peer-choice--pink { background: linear-gradient(135deg, color-mix(in srgb, var(--cubiri-brand-pink) 78%, #fff), var(--cubiri-brand-pink)); }
.cubiri-peer-choice--orange { background: linear-gradient(135deg, color-mix(in srgb, var(--cubiri-brand-orange) 78%, #fff), var(--cubiri-brand-orange)); }

/* Truth or Dare / Vadí-Nevadí are two equal peer choices, not primary vs secondary.
   Canonical two-choice mapping: first = pink, second = orange. */
.party-choice .party-choice-truth {
  background: linear-gradient(135deg, color-mix(in srgb, var(--cubiri-brand-pink) 78%, #fff), var(--cubiri-brand-pink));
  color: #fff;
}
.party-choice .party-choice-dare {
  background: linear-gradient(135deg, color-mix(in srgb, var(--cubiri-brand-orange) 78%, #fff), var(--cubiri-brand-orange));
  color: #fff;
}

@media (max-width: 360px) { .cubiri-option-grid { gap: 6px; } }