/* Perfect-score presentation is isolated from the main application stylesheet. */

/* 100% attempt presentation
   See PERFECT_SCORE_CELEBRATIONS.md. This is intentionally visual-only: the
   scoring, coaching, persistence, and adaptive-selection signals are unchanged. */
.attempt-score-line {
  width: 100%;
  min-height: 44px;
  min-width: 0;
  display: grid;
  align-items: center;
  justify-items: center;
  position: relative;
}

.attempt-pill > span,
.attempt-pill > .attempt-score-line,
.attempt-score-line > * {
  position: relative;
  z-index: 2;
}

.attempt-pill.perfect-score {
  border-color: color-mix(in srgb, var(--brand-emerald, #08766d) 84%, var(--brand-ink, #152126));
  color: var(--brand-canvas, #fbf8f0);
  background:
    radial-gradient(circle at 20% 4%, color-mix(in srgb, var(--brand-aqua, #98e1dc) 22%, transparent), transparent 44%),
    linear-gradient(145deg,
      color-mix(in srgb, var(--brand-emerald, #08766d) 84%, var(--brand-teal, #0f8f8b)),
      var(--brand-emerald, #08766d));
  box-shadow: 0 10px 24px color-mix(in srgb, var(--brand-emerald, #08766d) 22%, transparent);
}

.attempt-pill.perfect-score > span {
  border: 1px solid color-mix(in srgb, var(--brand-canvas, #fbf8f0) 72%, transparent);
  color: var(--brand-emerald, #08766d);
  background: var(--brand-canvas, #fbf8f0);
}

.attempt-pill.perfect-score strong {
  color: var(--brand-canvas, #fbf8f0);
}

.attempt-pill.perfect-score > button {
  color: var(--brand-emerald, #08766d);
  background: var(--brand-canvas, #fbf8f0);
}

.attempt-perfect-smile {
  width: 31px;
  height: 31px;
  display: grid;
  flex: 0 0 auto;
  place-items: center;
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  border: 1px solid color-mix(in srgb, var(--brand-canvas, #fbf8f0) 74%, transparent);
  border-radius: 50%;
  color: var(--brand-emerald, #08766d);
  background: var(--brand-canvas, #fbf8f0);
  box-shadow: 0 4px 10px rgba(21, 33, 38, 0.15);
}

.attempt-perfect-smile svg {
  width: 24px;
  height: 24px;
  display: block;
  overflow: visible;
}

.attempt-pill .attempt-replay-button {
  min-width: 68px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  position: absolute;
  left: 8px;
  top: 50%;
  transform: translateY(-50%);
  padding: 0 8px;
  border: 1px solid color-mix(in srgb, var(--brand-emerald, #08766d) 24%, transparent);
  border-radius: 999px;
  color: var(--brand-emerald, #08766d);
  background: var(--brand-canvas, #fbf8f0);
  font-size: 0.74rem;
  font-weight: 900;
  cursor: pointer;
}

.attempt-pill .attempt-replay-button img {
  width: 18px;
  height: 18px;
  display: block;
}

.attempt-pill .attempt-replay-button:disabled {
  opacity: 0.48;
  cursor: not-allowed;
}

.attempt-pill.perfect-score .attempt-replay-button {
  border-color: color-mix(in srgb, var(--brand-canvas, #fbf8f0) 76%, transparent);
  color: var(--brand-emerald, #08766d);
  background: var(--brand-canvas, #fbf8f0);
}

.perfect-score-celebration {
  position: absolute !important;
  inset: 0;
  z-index: 1 !important;
  pointer-events: none;
  overflow: hidden;
}

.perfect-score-celebration > i {
  --perfect-index: 0;
  width: 5px;
  height: 5px;
  position: absolute;
  left: 50%;
  top: 54%;
  border-radius: 2px;
  opacity: 0;
  background: var(--brand-gold, #efb94e);
}

.perfect-score-celebration > i:nth-child(1) { --perfect-index: 0; --perfect-angle: 0deg; --perfect-ray-angle: 0deg; --perfect-delay: 0ms; --perfect-ripple-delay: 0ms; --perfect-node-delay: 160ms; --perfect-side-x: -40px; --perfect-side-y: -12px; --perfect-light-x: -36px; --perfect-orbit-start: 0deg; --perfect-orbit-end: 250deg; }
.perfect-score-celebration > i:nth-child(2) { --perfect-index: 1; --perfect-angle: 30deg; --perfect-ray-angle: 36deg; --perfect-delay: 18ms; --perfect-ripple-delay: 120ms; --perfect-node-delay: 350ms; --perfect-side-x: -24px; --perfect-side-y: 12px; --perfect-light-x: -28px; --perfect-orbit-start: 180deg; --perfect-orbit-end: 430deg; }
.perfect-score-celebration > i:nth-child(3) { --perfect-index: 2; --perfect-angle: 60deg; --perfect-ray-angle: 72deg; --perfect-delay: 36ms; --perfect-ripple-delay: 240ms; --perfect-node-delay: 540ms; --perfect-side-x: -8px; --perfect-side-y: -12px; --perfect-light-x: -20px; }
.perfect-score-celebration > i:nth-child(4) { --perfect-index: 3; --perfect-angle: 90deg; --perfect-ray-angle: 108deg; --perfect-delay: 54ms; --perfect-side-x: 8px; --perfect-side-y: 12px; --perfect-light-x: -12px; }
.perfect-score-celebration > i:nth-child(5) { --perfect-index: 4; --perfect-angle: 120deg; --perfect-ray-angle: 144deg; --perfect-delay: 72ms; --perfect-side-x: 24px; --perfect-side-y: -12px; --perfect-light-x: -4px; }
.perfect-score-celebration > i:nth-child(6) { --perfect-index: 5; --perfect-angle: 150deg; --perfect-ray-angle: 180deg; --perfect-delay: 90ms; --perfect-side-x: 40px; --perfect-side-y: 12px; --perfect-light-x: 4px; }
.perfect-score-celebration > i:nth-child(7) { --perfect-index: 6; --perfect-angle: 180deg; --perfect-ray-angle: 216deg; --perfect-delay: 108ms; --perfect-light-x: 12px; }
.perfect-score-celebration > i:nth-child(8) { --perfect-index: 7; --perfect-angle: 210deg; --perfect-ray-angle: 252deg; --perfect-delay: 126ms; --perfect-light-x: 20px; }
.perfect-score-celebration > i:nth-child(9) { --perfect-index: 8; --perfect-angle: 240deg; --perfect-ray-angle: 288deg; --perfect-delay: 144ms; --perfect-light-x: 28px; }
.perfect-score-celebration > i:nth-child(10) { --perfect-index: 9; --perfect-angle: 270deg; --perfect-ray-angle: 324deg; --perfect-delay: 162ms; --perfect-light-x: 36px; }
.perfect-score-celebration > i:nth-child(11) { --perfect-index: 10; --perfect-angle: 300deg; --perfect-delay: 180ms; }
.perfect-score-celebration > i:nth-child(12) { --perfect-index: 11; --perfect-angle: 330deg; --perfect-delay: 198ms; }
.perfect-score-celebration > i:nth-child(3n + 2) { background: var(--brand-cyan, #58ced0); }
.perfect-score-celebration > i:nth-child(3n + 3) { background: var(--brand-aqua, #98e1dc); }

.perfect-score-celebration.play[data-perfect-celebration="gold-confetti"] > i {
  animation: perfectScoreConfetti 820ms cubic-bezier(0.18, 0.72, 0.28, 1) var(--perfect-delay) both;
}

.perfect-score-celebration.play[data-perfect-celebration="neural-bloom"]::before {
  width: 58px;
  height: 58px;
  position: absolute;
  left: 50%;
  top: 52%;
  border-radius: 50%;
  content: "";
  background: radial-gradient(circle,
    color-mix(in srgb, var(--brand-aqua, #98e1dc) 76%, transparent) 0 24%,
    color-mix(in srgb, var(--brand-cyan, #58ced0) 34%, transparent) 48%,
    transparent 72%);
  animation: perfectScoreBloom 900ms cubic-bezier(0.2, 0.85, 0.25, 1) both;
}

.perfect-score-celebration[data-perfect-celebration="success-ripple"] > i:nth-child(n + 4) { display: none; }
.perfect-score-celebration.play[data-perfect-celebration="success-ripple"] > i:nth-child(-n + 3) {
  width: 46px;
  height: 46px;
  left: 50%;
  top: 52%;
  border: 2px solid var(--brand-aqua, #98e1dc);
  border-radius: 50%;
  background: transparent;
  animation: perfectScoreRipple 820ms ease-out var(--perfect-ripple-delay) both;
}

.perfect-score-celebration.play[data-perfect-celebration="route-complete"]::before {
  width: 92px;
  height: 2px;
  position: absolute;
  left: 13%;
  top: 66%;
  border-radius: 999px;
  content: "";
  background: linear-gradient(90deg, var(--brand-aqua, #98e1dc), var(--brand-gold, #efb94e));
  transform: rotate(-20deg) scaleX(0);
  transform-origin: left center;
  animation: perfectScoreRoute 720ms ease-out both;
}

.perfect-score-celebration[data-perfect-celebration="route-complete"] > i:nth-child(n + 4) { display: none; }
.perfect-score-celebration.play[data-perfect-celebration="route-complete"] > i:nth-child(-n + 3) {
  border-radius: 50%;
  animation: perfectScoreNode 340ms cubic-bezier(0.2, 1.5, 0.4, 1) var(--perfect-node-delay) both;
}
.perfect-score-celebration[data-perfect-celebration="route-complete"] > i:nth-child(1) { left: 18%; top: 66%; }
.perfect-score-celebration[data-perfect-celebration="route-complete"] > i:nth-child(2) { left: 48%; top: 50%; }
.perfect-score-celebration[data-perfect-celebration="route-complete"] > i:nth-child(3) { left: 79%; top: 34%; }

.perfect-score-celebration.play[data-perfect-celebration="gold-orbit"]::before {
  width: 92px;
  height: 54px;
  position: absolute;
  left: 50%;
  top: 52%;
  border: 1px solid color-mix(in srgb, var(--brand-gold, #efb94e) 64%, transparent);
  border-radius: 50%;
  content: "";
  animation: perfectScoreOrbit 900ms cubic-bezier(0.25, 0.8, 0.2, 1) both;
}

.perfect-score-celebration[data-perfect-celebration="gold-orbit"] > i:nth-child(n + 3) { display: none; }
.perfect-score-celebration.play[data-perfect-celebration="gold-orbit"] > i:nth-child(-n + 2) {
  border-radius: 50%;
  animation: perfectScoreOrbitDot 900ms ease-out var(--perfect-delay) both;
}

.perfect-score-celebration[data-perfect-celebration="side-sparkle"] > i:nth-child(n + 7) { display: none; }
.perfect-score-celebration.play[data-perfect-celebration="side-sparkle"] > i:nth-child(-n + 6) {
  animation: perfectScoreSideSparkle 720ms ease-out var(--perfect-delay) both;
}

.perfect-score-celebration[data-perfect-celebration="sunrise-rays"] > i:nth-child(n + 11) { display: none; }
.perfect-score-celebration.play[data-perfect-celebration="sunrise-rays"] > i:nth-child(-n + 10) {
  width: 2px;
  height: 16px;
  border-radius: 999px;
  transform-origin: 50% 38px;
  animation: perfectScoreRay 760ms ease-out var(--perfect-delay) both;
}

.perfect-score-celebration.play[data-perfect-celebration="connection-spark"]::before {
  position: absolute;
  inset: 18px 14px;
  content: "";
  background:
    linear-gradient(28deg, transparent 0 28%, color-mix(in srgb, var(--brand-aqua, #98e1dc) 68%, transparent) 29% 30%, transparent 31% 100%),
    linear-gradient(150deg, transparent 0 43%, color-mix(in srgb, var(--brand-cyan, #58ced0) 58%, transparent) 44% 45%, transparent 46% 100%);
  animation: perfectScoreConnections 760ms ease-out both;
}

.perfect-score-celebration[data-perfect-celebration="connection-spark"] > i:nth-child(n + 5) { display: none; }
.perfect-score-celebration.play[data-perfect-celebration="connection-spark"] > i:nth-child(-n + 4) {
  border-radius: 50%;
  animation: perfectScoreNode 360ms cubic-bezier(0.2, 1.5, 0.4, 1) var(--perfect-delay) both;
}
.perfect-score-celebration[data-perfect-celebration="connection-spark"] > i:nth-child(1) { left: 17%; top: 67%; }
.perfect-score-celebration[data-perfect-celebration="connection-spark"] > i:nth-child(2) { left: 39%; top: 33%; }
.perfect-score-celebration[data-perfect-celebration="connection-spark"] > i:nth-child(3) { left: 64%; top: 60%; }
.perfect-score-celebration[data-perfect-celebration="connection-spark"] > i:nth-child(4) { left: 84%; top: 27%; }

.perfect-score-celebration.play[data-perfect-celebration="ribbon-sweep"]::before {
  width: 58%;
  height: 105%;
  position: absolute;
  left: -70%;
  top: -3%;
  content: "";
  background: linear-gradient(90deg,
    transparent,
    color-mix(in srgb, var(--brand-gold-soft, #f7d98d) 52%, transparent),
    color-mix(in srgb, var(--brand-aqua, #98e1dc) 64%, transparent),
    transparent);
  filter: blur(1px);
  transform: skewX(-18deg);
  animation: perfectScoreRibbon 860ms ease-in-out both;
}

.perfect-score-celebration.play[data-perfect-celebration="floating-lights"] > i:nth-child(-n + 10) {
  border-radius: 50%;
  animation: perfectScoreLights 1050ms ease-out var(--perfect-delay) both;
}

@keyframes perfectScoreConfetti {
  0% { opacity: 0; transform: translate(-50%, -50%) rotate(var(--perfect-angle)) translateY(0) scale(0.45); }
  18% { opacity: 1; }
  100% { opacity: 0; transform: translate(-50%, -50%) rotate(var(--perfect-angle)) translateY(-64px) rotate(210deg) scale(1); }
}

@keyframes perfectScoreBloom {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(0.2); }
  42% { opacity: 0.95; }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(2.1); }
}

@keyframes perfectScoreRipple {
  0% { opacity: 0.72; transform: translate(-50%, -50%) scale(0.4); }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(2.25); }
}

@keyframes perfectScoreRoute {
  0% { opacity: 0; transform: rotate(-20deg) scaleX(0); }
  30% { opacity: 1; }
  100% { opacity: 0; transform: rotate(-20deg) scaleX(1); }
}

@keyframes perfectScoreNode {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(0); }
  70% { opacity: 1; transform: translate(-50%, -50%) scale(1.35); }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(1); }
}

@keyframes perfectScoreOrbit {
  0% { opacity: 0; transform: translate(-50%, -50%) rotate(-50deg) scale(0.7); }
  36% { opacity: 1; }
  100% { opacity: 0; transform: translate(-50%, -50%) rotate(235deg) scale(1.18); }
}

@keyframes perfectScoreOrbitDot {
  0% { opacity: 0; transform: translate(-50%, -50%) rotate(var(--perfect-orbit-start)) translateY(-33px) scale(0.5); }
  30% { opacity: 1; }
  100% { opacity: 0; transform: translate(-50%, -50%) rotate(var(--perfect-orbit-end)) translateY(-45px) scale(1); }
}

@keyframes perfectScoreSideSparkle {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(0.3); }
  45% { opacity: 1; transform: translate(calc(-50% + var(--perfect-side-x)), calc(-50% + var(--perfect-side-y))) rotate(45deg) scale(1.3); }
  100% { opacity: 0; transform: translate(calc(-50% + var(--perfect-side-x)), calc(-50% + var(--perfect-side-y))) rotate(90deg) scale(0.8); }
}

@keyframes perfectScoreRay {
  0% { opacity: 0; transform: translate(-50%, -50%) rotate(var(--perfect-ray-angle)) translateY(-12px) scaleY(0.3); }
  45% { opacity: 0.92; }
  100% { opacity: 0; transform: translate(-50%, -50%) rotate(var(--perfect-ray-angle)) translateY(-42px) scaleY(1.2); }
}

@keyframes perfectScoreConnections {
  0% { opacity: 0; transform: scale(0.82); }
  40% { opacity: 0.9; }
  100% { opacity: 0; transform: scale(1.08); }
}

@keyframes perfectScoreRibbon {
  0% { opacity: 0; transform: translateX(0) skewX(-18deg); }
  20% { opacity: 1; }
  100% { opacity: 0; transform: translateX(330%) skewX(-18deg); }
}

@keyframes perfectScoreLights {
  0% { opacity: 0; transform: translate(calc(-50% + var(--perfect-light-x)), 30px) scale(0.35); }
  26% { opacity: 0.95; }
  100% { opacity: 0; transform: translate(calc(-50% + var(--perfect-light-x)), -60px) scale(1.15); }
}

@media (prefers-reduced-motion: reduce) {
  .perfect-score-celebration { display: none; }
}