#end-game-menu {
  z-index: 20;
}

#end-game-tip {
  margin: 1cqh auto;
  padding: 1cqh 1.5cqh;
  max-width: 90%;
  background: rgba(255, 255, 255, 0.08);
  border-left: 0.4cqh solid #ffa409;
  border-radius: 0.6cqh;
  font-size: 1.8cqh;
  line-height: 1.3;
  text-align: center;
  color: #fff;
}

.end-game-row {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  width: 100%;
}

.end-game-star-row {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: center;
  align-items: center;
  width: 100%;
  margin: 1.5cqh 0;
  min-height: 4cqh;
  overflow: hidden;
}

.end-game-star-row .end-game-star-icon {
  width: 3.2cqh;
  height: 3.2cqh;
  flex-shrink: 0;
  transition: opacity 0.3s ease;
}

.end-game-star-row .end-game-star-icon + .end-game-star-icon {
  margin-left: var(--end-game-star-spacing, 0.6cqh);
}

.end-game-star-row .end-game-star-icon svg {
  width: 100%;
  height: 100%;
  fill: white;
}

.end-game-star-row .end-game-star-icon.flown {
  opacity: 0;
}

/* --- 10x10 Problem Grid --- */

#end-game-grid {
  display: grid;
  grid-template-columns: 2cqh repeat(10, 2cqh);
  grid-template-rows: 2cqh repeat(10, 2cqh);
  gap: 1px;
  justify-content: center;
  margin: 1.5cqh auto;
}

.end-game-grid-header {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5cqh;
  opacity: 0.6;
}

.end-game-grid-cell {
  position: relative;
  overflow: visible;
  border-radius: 2px;
  cursor: default;
}

/* Overlay placed on cells during TICKING_GRID reveal */
.end-game-grid-overlay {
  position: absolute;
  inset: 0;
  border-radius: 2px;
}

.end-game-grid-overlay.speed-fast {
  background-color: #4caf50;
}

.end-game-grid-overlay.speed-medium {
  background-color: #2e7d32;
}

.end-game-grid-overlay.speed-slow {
  background-color: #1b5e20;
}

.end-game-grid-overlay.speed-incorrect {
  background-color: #c62828;
}

/* Incorrect overlay tumbles off and fades out */
@keyframes fall-off {
  0% {
    transform: none;
    opacity: 1;
  }
  100% {
    transform: translateY(300%) rotate(15deg);
    opacity: 0;
  }
}

@keyframes pulse {
  0% {
    filter: brightness(1);
  }
  50% {
    filter: brightness(1.2);
  }
  100% {
    filter: brightness(1);
  }
}

.end-game-grid-overlay.pulse {
  animation: pulse 2000ms infinite;
  pointer-events: none;
}

.end-game-grid-overlay.falling {
  animation: fall-off 1000ms ease-in forwards;
  z-index: 1;
}

.end-game-cell-element-icon {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  z-index: 2;
}

.end-game-cell-element-icon svg {
  width: 2cqh;
  height: 2cqh;
  fill: white;
  display: block;
}

.end-game-cell-element-icon.falling {
  animation: fall-off 1000ms ease-in forwards;
}

.end-game-grid-cell.speed-none {
  background-color: #333;
}

.end-game-grid-cell.speed-fast {
  background-color: #4caf50;
  cursor: pointer;
}

.end-game-grid-cell.speed-medium {
  background-color: #2e7d32;
  cursor: pointer;
}

.end-game-grid-cell.speed-slow {
  background-color: #1b5e20;
  cursor: pointer;
}

/* --- Stats Row --- */

#end-game-stats {
  display: flex;
  justify-content: space-around;
  align-items: center;
  margin: 1.5cqh 2cqh;
}

.end-game-stat {
  text-align: center;
}

.end-game-stat-value {
  font-size: 4.5cqh;
}

.end-game-stat-label {
  font-size: 2cqh;
  opacity: 0.7;
  margin-top: 0.5cqh;
}

.end-game-stat-icon {
  height: 3cqh;
  fill: white;
}

/* The element icon sitting in the "Earned" label. .end-game-stat-icon is sized
   for the flying copies, which are larger than label text — shrink it here so
   the icon sits on the label's line instead of pushing the row taller. */
#end-game-elements-earned-icon {
  display: inline-block;
  margin-right: 0.6cqh;
}

#end-game-elements-earned-icon .end-game-stat-icon {
  height: 2cqh;
  vertical-align: -0.25cqh;
}

.end-game-flying-icon {
  position: fixed;
  left: -2cqh;
  top: -2cqh;
  width: 4cqh;
  height: 4cqh;
  pointer-events: none;
  z-index: 100000;
  will-change: transform;
  transition: transform 800ms cubic-bezier(0.3, -0.37, 0.83, 0.67);
}

.end-game-flying-icon svg {
  width: 100%;
  height: 100%;
  fill: white;
}

/* --- Treasure Display --- */

#end-game-treasure-display {
  position: absolute;
  width: 100%;
  top: 0;
  opacity: 0;
  transition: 0.5s;
}

#end-game-treasure-top-icon {
  position: absolute;
  top: 25cqh;
  width: 40%;
  margin-left: 30%;
}

#end-game-treasure-bottom-icon {
  position: absolute;
  top: 25cqh;
  width: 40%;
  margin-left: 30%;
}

#end-game-treasure-text {
  position: absolute;
  top: 25cqh;
  font-size: 4cqh;
  text-align: center;
  width: 90%;
  margin-left: 5%;
}

/* --- Operation Progress Bar --- */

#end-game-operation-progress {
  margin: 0.5cqh 20% 0.5cqh;
}

#end-game-op-progress-bar {
  position: relative;
  width: 100%;
  height: 2.5cqh;
  background-color: rgba(255, 255, 255, 0.15);
  border-radius: 1.25cqh;
  overflow: visible;
}

#end-game-op-progress-fill {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, #4caf50, #8bc34a);
  border-radius: 1.25cqh;
  transition: width 0.3s;
}

#end-game-op-progress-text {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  font-size: 1.8cqh;
  opacity: 0.8;
  pointer-events: none;
}

.end-game-blessing-icon {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  font-weight: bold;
  font-size: 2cqh;
  opacity: 0.4;
  transition: opacity 0.3s;
  padding: 0 0.5cqh;
}

.end-game-blessing-earned {
  opacity: 1;
  animation: blessingPulse 0.6s ease-in-out 3;
}

@keyframes blessingPulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.3); }
}

.end-game-blessing-pulse {
  font-weight: bold;
  animation: elementBlessingPulse 3s linear infinite;
}

/* --- Element Backgrounds --- */

.earth-background {
  background-color: var(--earth-color);
}

.air-background {
  background-color: var(--air-color);
}

.water-background {
  background-color: var(--water-color);
}

.fire-background {
  background-color: var(--fire-color);
}

.earth-shadow-background {
  background-color: var(--earth-color-shadow);
}

.air-shadow-background {
  background-color: var(--air-color-shadow);
}

.water-shadow-background {
  background-color: var(--water-color-shadow);
}

.fire-shadow-background {
  background-color: var(--fire-color-shadow);
}

#end-game-fail-buttons {
  gap: 2cqh;
  width: 90%;
  margin: 0 auto;
}

#end-game-fail-buttons .ff-button {
  flex: 1;
  padding: 1.5cqh 0;
}

a {
  color: #00b7ff;
}