/* Farkle visual alignment with Cubiri Design System.
   Presentation only: scoring, banking and dice-selection semantics stay unchanged. */

/* Score tiles: TOTAL owns orange, live turn-state tiles own purple. */
.game-tab-content[data-game-component="farkle-scoring"] .farkle-info-tile {
  border-color: color-mix(in srgb, var(--cubiri-brand-purple) 44%, transparent);
  background:
    radial-gradient(circle at 28% 20%, rgba(255,255,255,.16), transparent 34%),
    linear-gradient(145deg,
      color-mix(in srgb, var(--cubiri-brand-purple) 32%, #17131f),
      color-mix(in srgb, var(--cubiri-brand-purple) 15%, #111217));
  box-shadow:
    0 8px 20px rgb(0 0 0 / .18),
    inset 0 1px 0 rgb(255 255 255 / .07);
}

.game-tab-content[data-game-component="farkle-scoring"] .farkle-info-tile.is-total {
  border-color: color-mix(in srgb, var(--cubiri-brand-orange) 58%, transparent);
  background:
    radial-gradient(circle at 28% 20%, rgba(255,255,255,.14), transparent 34%),
    linear-gradient(145deg,
      color-mix(in srgb, var(--cubiri-brand-orange) 28%, #21150f),
      color-mix(in srgb, var(--cubiri-brand-orange) 12%, #131313));
}

.game-tab-content[data-game-component="farkle-scoring"] .farkle-info-tile.is-total .farkle-info-label,
.game-tab-content[data-game-component="farkle-scoring"] .farkle-info-tile.is-total .farkle-info-value {
  color: var(--cubiri-brand-orange);
}

/* Keep error semantics visible on top of the palette. */
.game-tab-content[data-game-component="farkle-scoring"] .farkle-info-tile.is-bust,
.game-tab-content[data-game-component="farkle-scoring"] .farkle-info-tile.is-invalid {
  border-color: color-mix(in srgb, #ef4055 72%, transparent);
}

/* Bank is a Farkle gameplay action, but deliberately pink rather than the global tri-colour CTA. */
.game-tab-content[data-game-component="farkle-scoring"] .farkle-bank-button:not(:disabled) {
  border-color: color-mix(in srgb, var(--cubiri-brand-pink) 72%, transparent);
  background:
    radial-gradient(circle at 30% 10%, rgba(255,255,255,.15), transparent 38%),
    linear-gradient(90deg,
      color-mix(in srgb, var(--cubiri-brand-pink) 58%, #24131d),
      color-mix(in srgb, var(--cubiri-brand-pink) 34%, #151116));
  color: #fff;
  box-shadow:
    0 7px 20px color-mix(in srgb, var(--cubiri-brand-pink) 22%, transparent),
    inset 0 1px 0 rgb(255 255 255 / .08);
}

/* New Game intentionally remains quiet/secondary. */

/*
 * Farkle held-dice visuals.
 * Every held die keeps the same Cubiri purple → pink → orange border.
 * A newly selected die gets a stronger OUTER glow only. Once that die is
 * locked into the next roll, the glow disappears but the gradient border stays.
 * This intentionally overrides the legacy global purple held style.
 */
.landing:has(.game-tab-content[data-game-component="farkle-scoring"]) .die-instance.is-held {
  filter: none;
}

.landing:has(.game-tab-content[data-game-component="farkle-scoring"]) .die-instance.is-held::after {
  content: "";
  position: absolute;
  inset: 2px;
  border: 2px solid transparent;
  border-radius: 16px;
  background: var(--cubiri-brand-gradient) border-box;
  -webkit-mask:
    linear-gradient(#fff 0 0) padding-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
  opacity: 1;
}

.landing:has(.game-tab-content[data-game-component="farkle-scoring"]) .die-instance.is-held:not(.is-locked-held)::before {
  content: "";
  position: absolute;
  inset: 7px;
  border-radius: 14px;
  background: transparent;
  box-shadow:
    -9px 0 16px color-mix(in srgb, var(--cubiri-brand-purple) 58%, transparent),
    0 0 18px color-mix(in srgb, var(--cubiri-brand-pink) 48%, transparent),
    9px 0 16px color-mix(in srgb, var(--cubiri-brand-orange) 46%, transparent);
  pointer-events: none;
}

.landing:has(.game-tab-content[data-game-component="farkle-scoring"]) .die-instance.is-held.is-locked-held::before {
  content: none;
}