:root{
  --html-font-size: 1.8dvh; /* tune here */
  --fs-title-font-size: 2.1rem; /* tune here */
  --splitscreen-photo-width: 44%; /* tune here */
  --fullscreen-photo-padding-right: 2rem; /* tune here */
  --photo-aspect-ratio: 3/5; /* tune here */
  --graph-container-witdth-with-photo: 125%; /* tune here */
}

*, *::before, *::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  border: none;
}

.screenshot-friendly *,
.screenshot-friendly *::before,
.screenshot-friendly *::after {
  animation: none !important;
  transition: none !important;
}

/* Define the self-hosted font using @font-face */
@font-face {
  font-family: 'RobotoCondensed';
  src: url('fonts/RobotoCondensed-VariableFont_wght.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

html, button, input {
  font-family: 'RobotoCondensed', sans-serif;
  font-variant-caps: small-caps;
  font-size: var(--html-font-size);
}

html, body {
  min-height: 100vh;
}

body {
  background-color: #000;
  color: #FFF;
  display: flex;
  flex-direction: column;
  padding: 1rem;
}

.tramp-pictogram {
  position: absolute;
  top: 2.3rem;
  left: .5rem;
  /* width: 45px;  tune here */
}

.tramp-pictogram.mirror {
  transform: scaleX(-1);
}

.eurotramp {
  position: absolute;
  top: 1rem;
  right: 6rem;
  height: 3rem;
}

h1, .data-container {
  background-color: #323949;
}

h1 {
  font-weight: normal;
  width: 50%;
  border-radius: 1rem 1rem 0 0;
  padding: .5rem 1rem .5rem 5rem;
}

.fs-title {
  font-size: var(--fs-title-font-size);
  min-height: 3.54rem;
  white-space: nowrap; /* Prevent text from wrapping */
  overflow: hidden; /* Hide the overflow text */
  text-overflow: ellipsis; /* Add ellipsis (...) for overflow text */
}

.container {
  display: flex;
  padding: .8rem 5rem;
  border-radius: 0 1rem 0 0;
  background: linear-gradient(0deg, #000 0%, #323949 25%);
  flex-grow: 1;
}

.settings-container {
  display: flex;
  padding: 1rem;
  position: fixed; /* Fix the container relative to the viewport */
  top: -50%; /* Start hidden below the viewport */
  left: 0;
  width: 100%;
  background: #000000;
  overflow-y: auto; /* Allow vertical scrolling */
  height: 50%; /* Set the height of the settings container */
  transition: top 1.0s ease-in-out; /* Smooth transition for sliding in and out */
  z-index: 1000; /* Ensure it appears above other elements */
}

.settings-container.show {
  top: 0; /* Slide into view */
}

.settings-container.hide {
  top: -50%; /* Slide out of view */
}

.settings {
  padding: 1rem;
  border-radius: 1rem;
  background: #323949;
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  gap: .8rem;
}

.settings-close-btn {
  position: absolute;
  top: 1.7rem;
  right: 2.1rem;
  background: none;
  border: none;
  color: #fff;
  font-size: 2rem;
  font-weight: bold;
  cursor: pointer;
  z-index: 10;
  line-height: 1;
  padding: 0.5rem;
  transition: color 0.2s;
  touch-action: auto;
}

.settings-close-btn:hover {
  color: #ff6b6b;
}

.settings-title {
  font-size: 1.8rem;
  font-weight: bold;
  color: #FFF;
  text-align: center;
  text-transform: uppercase;
  border-bottom: 2px solid #555b6e;
  padding-bottom: 0.5rem;
}

.settings-item {
  font-size: 1.4rem;
  color: #FFF;
  background: #434c61;
  padding: .5rem 1rem;
  border-radius: 0.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  transition: background 0.3s ease;
}

.settings-input-group {
  display: flex;
  gap: 0.5rem;
  align-items: center;
}

.settings-input {
  flex: 1;
  padding: 0.5rem;
  font-size: 1.2rem;
  border: 1px solid #555b6e;
  border-radius: 0.5rem;
  background: #434c61;
  color: #FFF;
}

.settings-input:focus {
  border-color: #6b7284;
  outline: none;
}
.settings-button-group {
  display: flex;
  gap: 0.5rem;
}

.settings-btn {
  padding: 0.5rem 1rem;
  font-size: 1rem; 
  min-width: 10rem;
  color: #FFF;
  background: #434c61;
  border: 3px solid #555b6e;
  border-radius: 0.5rem;
  cursor: pointer;
  transition: background 0.3s ease;
}

.settings-btn:hover {
  background: #555b6e;
}

.settings-btn.active {
  background: #6b7284;
  border: 3px solid #6b7284;
  /* font-weight: bold; */
}

.settings-item input[type="number"] {
  max-width: 10rem;
  text-align: center;
}

.hidden {
  display: none !important;
}

.result-container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: auto 1fr 1fr;
  justify-items: stretch;
  align-items: center;
  justify-content: stretch;
  align-content: space-evenly;
  flex-grow: 1;
  gap: .6rem;
  text-align: center;
}

.result-container.photo {
  /* grid-template-columns: 1.2fr 1fr 1.1fr 1fr; */
  /* grid-template-columns: 28% 1fr 24% 1fr; */
  grid-template-columns: 25% 23% auto 23%;
  grid-template-rows: auto 1fr 1fr;
}

.photo-container {
  display: none
}

/* Show the photo container only when the parent result container has the appropriate class */
.photo .photo-container {
  grid-row-end: span 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 100%;
  padding: 0 var(--fullscreen-photo-padding-right) 0 0;
}

.photo.left .photo-container {
  padding: 0 0 0 0; /* tune here */
}
.photo.right .photo-container {
  padding: 0 0 0 0; /* tune here */
}

.photo-rank {
  background: #252e40;
  width: 100%;
  flex-grow: 1;
  align-items: center;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  padding: 0.5rem 1rem;
  border-radius: .6rem .6rem 0 0;
}

.photo-image {
  width: 100%;
  object-fit: contain;
  background-color: #000;
  aspect-ratio: var(--photo-aspect-ratio);
}

.photo-score {
  background: #252e40;
  width: 100%;
  flex-grow: 1;
  align-items: center;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  padding: 0.5rem 1rem;
  border-radius: 0 0 .6rem .6rem;
}

.resultlist-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto 1fr;
  flex-grow: 1;
  gap: .6rem;
}

.resultlist {
  grid-column-end: span 2;
  align-self: flex-start;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: .5rem;
  padding-top: 1rem;
  padding-bottom: 1rem;
}

.resultlist-item {
  display: grid;
  grid-template-columns: 2ch 1fr auto;
  gap: 2rem;
  /* padding: 2rem 1rem; */
  padding: 0.9rem;
  border-radius: .6rem;
  align-items: center;
  align-content: center;
  background-color: #97979F;
  color: #000;
  font-size: 2.5dvh;
  /* font-size: 2vw; */
}

.resultlist-item-name {
  white-space: nowrap; /* Prevent text from wrapping */
  overflow: hidden; /* Hide the overflow text */
  text-overflow: ellipsis; /* Add ellipsis (...) for overflow text */
}

.resultlist-item.highlight {
  background-color: #D1A9A9;
}

.splitscreen-container {
  /* border: #FFF solid .6rem; */
  padding: .8rem 2rem; /* maybe, maybe not... */
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto;
  flex-grow: 1;
  gap: 0rem;
}


.result-splitscreen {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto auto auto;
  gap: .6rem;

  /* justify-items: center; */
  align-items: center;
  /* justify-content: space-between; */
  align-content: space-between;
  text-align: center;
  padding: 0rem .7rem; /* maybe, maybe not... */
}

.photo.result-splitscreen.left {
  grid-template-columns: var(--splitscreen-photo-width) auto;
}
.photo.result-splitscreen.right {
  grid-template-columns: auto var(--splitscreen-photo-width);
}


.result-splitscreen.right {
  grid-column: 2;
}

.resultlist-splitscreen {
  padding: 0rem .7rem;
}

.resultlist-splitscreen.right {
  grid-column: 2;
}

#left-result-container, #left-resultlist-container {
  border-right: #FFF solid 2px;
}

.competition {
  align-self: start;
  text-align: left;
}

.phase {
  align-self: start;
  text-align: right;
}

.name-club {
  align-self: start;
 }

.photo.result-container .name-club {
  grid-column: span 2;
 }

.name-club-left, .competition-right {
  text-align: right;
}

.phase.phase-right, .name-club.name-club-right {
  text-align: left;
}

.result-flag {
  height: var(--fs-title-font-size);
  object-fit: contain;
}

.donut {
  /* border: #FFF solid .1rem; */
  grid-row-end: span 2;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  z-index: 1;
}

.donut-splitscreen {
  grid-column-end: span 2;
  grid-row-end: span 1;
  width: 55%;
  justify-self: center;
  margin-top: 5rem;
}

.photo .donut-splitscreen {
  grid-column-end: span 1;
  justify-self: center;
  width: 100%; /* tune here */
  margin-top: 0;
}

.graph-container {
  width: 100%;
}
.photo .graph-container {
  width: var(--graph-container-witdth-with-photo);
}

.graph {
  position: relative;
  width: 100%;
  /* margin-bottom: 1rem; */
  /* margin-top: 1rem; */
  background-color: #96969e;
  border-radius: 1rem;
  color: #000;
  aspect-ratio: 554.14 / 310.3;
}

.score-component-title {
  padding: .5rem 0;
}
.score-component-title.left {
  padding-left: 1rem;
  text-align: left;
}
.score-component-title.right {
  padding-right: 1rem;
  text-align: right;
}


#execution {
  padding: .2rem;
  align-self: self-end;
  border-radius: .6rem;
  background-color: #0095fd;
}

#execution-data {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  padding: 1rem;
  gap: 1rem;
}

#execution-data-title {
  writing-mode: vertical-rl;
  text-orientation: mixed;
  font-size: 1.6rem;
}

.execution-score {
  position: relative;
  border: .4rem solid #000;
  border-radius: .4rem;
  background-color: #7895b1;
  flex-grow: 1;
  overflow: hidden;
}

.execution-score-data {
  height: 100%;
  background-color: #0095fd;
}

.execution-score-percentage {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 4.2rem;
  color: #FFF;
}

#time-of-flight-syn {
  padding: .2rem;
  align-self: self-start;
  border-radius: .6rem;
  background-color: #0ba61f;
}

#time-of-flight-syn-data {
  position: relative;
  padding: 1rem .5rem;
}

.flights-syn-container {
  --line-thickness: .3rem;
  position: relative;
  top: -.25rem; /* TOF data looks a bit shifted down without this */
  box-sizing: border-box;
  height: 100%;
  border-top: var(--line-thickness) #000 dashed;
  border-bottom: var(--line-thickness) #000 solid;
  display: flex;
  flex-direction: row;
  gap: .5rem;
  align-items: end;
  padding: 0 .5rem;
  overflow: hidden;
}

.flights-syn-container::after {
  content: '';
  display: block;
  position: absolute;
  top: calc(50% - calc(var(--line-thickness) / 2));
  left: 0;
  width: 100%;
  border-top: var(--line-thickness) #000 dashed;
}

.flight-syn {
  flex-grow: 1;
  background-color: #0ba61f;
}

#difficulty {
  padding: .2rem;
  align-self: self-start;
  justify-self: self-end;
  border-radius: .6rem;
  background-color: #2d4aa9;
}

#difficulty-data {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  padding: 1rem;
}

.somersault {
  height: 6vw;
  height: 6dvw;
}

.twist {
  height: 11vw;
  height: 11dvw;
  margin-right: .5rem;
}

.difficulty-somersault,
.difficulty-twist {
  padding: 1.7rem .8rem;
  flex-grow: 1;
  font-size: 3.8rem;
  font-weight: 500;
}

.difficulty-somersault {
  text-align: left;
  align-self: start;
}

.difficulty-twist {
  text-align: right;
  align-self: end;
}

footer {
  padding: 0 5rem;
  text-align: right;
  font-size: 1.6rem;
}


#hd {
  padding: .2rem;
  align-self: self-end;
  justify-self: self-end;
  border-radius: .6rem;
  background-color: #c91616;
}

.trampoline {
  position: relative;
  box-sizing: content-box;
  padding: 6%;
  background-color: #3264c8;
  border-radius: 1rem;
  display: flex;
  justify-content: center;
  align-items: center;
}

.trampoline.trampoline-splitscreen {
  /* border: #FFF solid 2px; */
  grid-column-end: span 2;
  width: 50%;
  justify-self: center;
}

.photo .trampoline.trampoline-splitscreen {
  grid-column-end: span 1;
  width: 75%; /* tune here */
  justify-self: center;
}

.trampoline-area {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
}

.trampoline__bed {
  width: 100%;
  background-color: white;
}

.trampoline__line {
  stroke: #e65a5a;
  stroke-width: 0.5%;
}

.landing-spot {
  position: absolute;
  width: 0;
  border: .6rem solid rgba(0, 0, 0, .7);
  border-radius: 100%;
  transform: translate(-50%, -50%);
}

.landing-spot.tramp2 {
  border: .6rem solid rgba(50, 100, 200, .7);
}

.donut-canvas {
  /* width: 80%; */
  width: 95%;
  aspect-ratio: 1 / 1;
}

.donut-data {
  position: absolute;
  font-size: 2.5rem;
  opacity: 0;
}

.donut-data.compact {
  font-size: 2rem;
  line-height: 0.9;
}

.donut-rank {
  /* position: absolute; */
  top: -3rem;
  left: 50%;
  transform: translate(-50%, -50%);
  /* font-size: 4.2rem; */
}

.photo .donut-rank,
.screenshot-friendly .donut-rank {
  display: none;
}

.screenshot-friendly .photo-rank-label,
.screenshot-friendly .photo-rank-value {
  display: none;
}

.donut-data.show {
  opacity: 1;
  transition: opacity 1.5s ease-in-out;
}

.donut-data-center {
  transform: translate(-50%, -50%);
}

.scroll-up {
  transform: translateY(101%);
}

.scroll-up.show {
  transform: translateY(0);
  transition: transform 1.5s ease-in-out;
}

.scroll-down {
  transform: translateY(-101%);
}

.scroll-down.show {
  transform: translateY(0);
  transition: transform 1.5s ease-in-out;
}

.scroll-left {
  transform: translateX(-100%);
}

.scroll-left.show {
  transform: translateX(0);
  transition: transform 1.5s ease-in-out;
}

.appear {
  opacity: 0;
  /*transition: opacity 1.5s ease-in-out;*/
}

.appear.show {
  opacity: 1;
  transition: opacity 1.5s ease-in-out;
}

.appear.hide {
  opacity: 0;
  transition: opacity 1.5s ease-in-out;
}