/* Visual refinements kept separate because the original stylesheet is minified. */
:root {
  --deep: #1d3b64;
  --ocean: #2f6fa8;
  --aqua: #69b6f2;
  --ink: #173b67;
  --glass: rgba(239, 247, 255, 0.95);
  --blue-050: #f2f8ff;
  --blue-100: #e4f1ff;
  --blue-200: #c8e2fb;
  --blue-300: #9fc9ee;
  --blue-400: #69ace2;
  --blue-500: #3d88c5;
  --blue-600: #286ca8;
  --blue-700: #1f5689;
}

body {
  background: rgb(29, 59, 100);
}

.ocean {
  background:
    radial-gradient(circle at 75% 8%, rgba(173, 215, 255, 0.2) 0 4%, transparent 25%),
    linear-gradient(180deg, #6f9fd0 0%, rgb(29, 59, 100) 44%, #102a4c 100%);
}

.ocean::after {
  background: repeating-linear-gradient(
    110deg,
    transparent 0 10%,
    rgba(196, 224, 255, 0.07) 13%,
    transparent 17%
  );
}

.ocean i {
  border-color: rgba(216, 235, 255, 0.62);
}

.setup-card,
.panel-screen {
  background: linear-gradient(145deg, rgba(34, 70, 113, 0.78), rgba(14, 39, 73, 0.94));
  border-color: rgba(174, 211, 246, 0.32);
}

/* Keep every interface surface in the same blue family. */
.brand p,
.panel-header p,
.eyebrow,
.game-header span,
.prompt span,
.lives {
  color: var(--blue-200);
}

.glass {
  background: var(--glass);
  color: var(--ink);
}

.link-button {
  color: var(--blue-600);
}

.library-list label {
  border-color: var(--blue-200);
}

.library-list label:has(input:checked) {
  border-color: var(--blue-500);
  background: var(--blue-100);
}

.library-list input {
  accent-color: var(--blue-600);
}

.library-list small,
.muted,
.book-row small,
.memory-card p {
  color: #54779b;
}

.round-choices button,
.tabs button {
  border-color: var(--blue-300);
  color: var(--ink);
}

.round-choices button.active,
.tabs button.active {
  background: var(--blue-600);
  border-color: var(--blue-600);
}

.secondary {
  background: var(--blue-100);
  color: var(--blue-700);
}

.round-button,
.audio-button {
  border-color: rgba(187, 218, 247, 0.5);
}

.progress-track {
  background: #173f6b;
}

.progress-track i {
  background: linear-gradient(90deg, var(--blue-400), #b9dcfa);
}

.game-stage {
  background: linear-gradient(rgba(72, 123, 174, 0.72), rgba(16, 43, 78, 0.96));
  border-color: rgba(174, 211, 246, 0.32);
}

.game-stage::after {
  background: #173f6b;
}

.slot {
  border-bottom-color: var(--blue-300);
}

.slot.space {
  border-color: var(--blue-400);
}

.slot.current,
.book-status,
.summary-stats div,
.summary-words div {
  background: rgba(126, 180, 229, 0.13);
}

.key {
  border-color: rgba(171, 208, 240, 0.75);
  background: linear-gradient(var(--blue-050), var(--blue-200));
  color: var(--ink);
  box-shadow: 0 4px 0 #739dc3;
}

.key:active {
  box-shadow: 0 1px 0 #739dc3;
}

.memory-card,
.failure-card,
.book-row {
  background: var(--blue-050);
  color: var(--ink);
}

.memory-card .audio-button,
.book-row button {
  background: var(--blue-600);
}

.memory-progress {
  background: var(--blue-200);
}

.failure-card strong {
  color: var(--blue-700);
}

/* Fish, ripple and splash share one waterline above the keyboard. */
.celebration {
  position: absolute;
  inset: 0;
  z-index: 4;
  display: block;
  overflow: hidden;
  --celebration-origin-y: 68%;
}

.celebration img {
  top: var(--celebration-origin-y);
  left: 50%;
  animation-name: fish-jump-from-ripple;
}

.ripple,
.splash {
  top: var(--celebration-origin-y);
  left: 50%;
}

.ripple {
  animation-name: celebration-ripple;
}

.splash {
  animation-name: celebration-splash;
}

@keyframes fish-jump-from-ripple {
  0% {
    transform: translate(-50%, -50%) rotate(-8deg) scale(0.72);
    opacity: 0;
  }

  16% {
    opacity: 1;
  }

  50% {
    transform: translate(-50%, -155%) rotate(4deg) scale(1);
    opacity: 1;
  }

  65% {
    transform: translate(-50%, -142%) rotate(-4deg) scale(1);
    opacity: 1;
  }

  100% {
    transform: translate(-50%, -50%) rotate(10deg) scale(0.72);
    opacity: 0;
  }
}

@keyframes celebration-ripple {
  0% {
    transform: translate(-50%, -50%) scale(0.55);
    opacity: 0;
  }

  12% {
    opacity: 0.9;
  }

  100% {
    transform: translate(-50%, -50%) scale(4.2);
    opacity: 0;
  }
}

@keyframes celebration-splash {
  0%, 72% {
    transform: translate(-50%, -50%) scale(0.35);
    opacity: 0;
  }

  84% {
    transform: translate(-50%, -50%) scale(1.25);
    opacity: 1;
  }

  100% {
    transform: translate(-50%, -50%) scale(0.9);
    opacity: 0;
  }
}

.memory-progress i {
  width: 100%;
  background: #4aa3e0;
  animation: memory-countdown 6s linear forwards;
}

.failure-card .primary {
  display: block;
  margin: 28px auto 0;
}

@keyframes memory-countdown {
  0% {
    width: 100%;
    background: #4aa3e0;
  }

  66.65% {
    background: #4aa3e0;
  }

  66.66% {
    background: #ffd34f;
  }

  83.32% {
    background: #ffd34f;
  }

  83.33% {
    background: #ef4b4b;
  }

  100% {
    width: 0;
    background: #ef4b4b;
  }
}

.brand img,
.celebration img {
  object-fit: contain;
  object-position: center;
  height: auto;
  aspect-ratio: 3 / 2;
}

.brand img {
  max-height: 150px;
}

.celebration img {
  max-height: min(180px, 30vw);
}

@media (max-width: 720px) {
  .brand img {
    max-height: 82px;
  }
}