/* Reset */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

#end_screen_container {
  position: fixed;
  width: 100%;
  height: 100%;
  inset: 0;
  z-index: 5000;
  background: rgba(255,255,255,0.98);
  display: flex;
  align-items: center;
  justify-content: center;
}

#end_screen_container.hidden {
  display: none;
}


/* Prend tout l’espace restant sans scroll */
.big_end_screen {
  width: 100%;
  height: 100%;
  background: var(--color-popup);
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}

/* Container à ratio fixe : 9/16 */
.end_screen {
  width: min(100vw, 56.25vh);
  height: min(100vh, 177.78vw);
  aspect-ratio: 9 / 16;
  padding-left: 20px;
  padding-right: 20px;
  background: var(--color-popup);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  container-type: inline-size;
}

.end_header_block {
  width: 100%;
  aspect-ratio: 30 / 9;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
}
.end_header_space {
  width: 100%;
  height: 35%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
}
.end_app_name_block {
  height: 100%;
  height: 65%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  width: fit-content;
  line-height: 1.1;
}
.end_app_title {
  font-weight: bold;
  font-size: clamp(18px, 8cqw, 70px);
  color: var(--color-secondary);
  letter-spacing: 0.5px;
}
.end_app_subtitle {
  font-size: clamp(8px, 4cqw, 30px);
  color: var(--color-primary-dark);
  letter-spacing: 0.3px;
  margin-top: -2px;
}

/* MAIN BLOCK */
.end_main_block {
  width: 100%;
  aspect-ratio: 9 / 9;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
}
.end_block {
  width: 100%;
  aspect-ratio: 40.5 / 9;
  display: flex;
  justify-content: center;
  align-items: center;
}

.end_block span {
  width: 100%;
  height: 100%;
  font-weight: bold;
  color: var(--color-secondary);
  font-size: clamp(12px, 9cqw, 70px);
  display: flex;
  justify-content: center;
  align-items: flex-start;
  text-align: center;
}

.end_result_block {
  width: 100%;
  aspect-ratio: 10,6 / 9;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
}
.end_score_block {
  width: 100%;
  gap: 6px;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: flex-end;
}
.end_score { 
  font-size: clamp(8px, 6cqw, 30px);
  color: var(--color-primary-dark);
}
.end_score_value {
  color: var(--color-secondary);
  font-weight: bold;
  font-size: clamp(8px, 6cqw, 30px);
}

.end_cercles_block {
  width: 100%;
  aspect-ratio: 55 / 9;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}
.end_cercle_1, .end_cercle_2, .end_cercle_3, .end_cercle_4, .end_cercle_5 {
  height: 100%;
  background-color: var(--color-primary);
  border-radius: clamp(5px,1.5cqw,30px);
  aspect-ratio: 1 / 1;
  border: 1.5px solid var(--color-border);
}
.cercle_green  { background: var(--color-green); border-color: var(--color-green); }
.cercle_blue  { background: var(--color-blue); border-color: var(--color-blue); }
.cercle_yellow  { background: var(--color-yellow); border-color: var(--color-yellow); }
.cercle_red  { background: var(--color-red); border-color: var(--color-red); }
.cercle_gray  { background: var(--color-gray); border-color: var(--color-gray); }

.end_button_row {
  width: 100%;
  gap: 14px;
  aspect-ratio: 72 / 9;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
}
.end_btn {
  font-family: inherit;
  font-weight: 700;
  border: none;
  border-radius: 10px;
  padding: 0;
  cursor: pointer;
  transition: background 0.15s;
  flex: 1 1 0;
  text-align: center;
  max-width: none;
  display: flex;
  align-items: center;
  justify-content: center;
}
.end_btn.stats {
  height: 100%;
  background: var(--color-stats);
  font-size: clamp(8px, 5cqw, 30px);
  color: var(--color-secondarystats);
}
.end_btn.share {
  height: 100%;
  font-size: clamp(8px, 5cqw, 30px);
  background: var(--color-green);
  color: #ffffff;
  gap: 10px;
}
.end_back_row {
  width: 100%;
  aspect-ratio: 72 / 9;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.end_btn.return {
  width: 100%;
  font-size: clamp(8px, 5cqw, 30px);
  background: var(--color-primary-dark-stat);
  color: white;
}
.end_btn-icon {
  height: 50%;
}

.end_btn {
  transition: background 0.15s, transform 0.13s;
}
.end_btn:hover,
.end_btn:active {
  transform: scale(0.95);
}
.end_btn:not(:active) {
  transform: scale(1);
}


/* FOOTER */

.end_footer_block {
  width: 100%;
  aspect-ratio: 30 / 9;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.end_footer_text {
  width: 100%;
  height: 30%;
  font-weight: bold;
  font-size: clamp(6px, 4.5cqw, 30px);
  color: var(--color-primary-dark);
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
}
.end_footer_chrono {
  width: 100%;
  height: 60%;
  display: flex;
  font-size: clamp(12px, 10cqw, 70px);
  font-weight: bold;
  color: var(--color-secondary);
  flex-direction: row;
  align-items: center;
  justify-content: center;
}
.end_footer_space {
  width: 100%;
  height: 10%;
}

/* {
  outline: 1px dotted red;
}