/* === FONTS === */
@font-face {
  font-family: 'Roba High';
  src: url('fonts/RobaV0.5High-Semibold.woff2') format('woff2'),
       url('fonts/RobaV0.5High-Semibold.woff') format('woff');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Roba Low';
  src: url('fonts/RobaV0.5Low-Medium.woff2') format('woff2'),
       url('fonts/RobaV0.5Low-Medium.woff') format('woff');
  font-weight: 500; /* Medium */
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Roba Low';
  src: url('fonts/RobaV0.5Low-Semibold.woff2') format('woff2'),
       url('fonts/RobaV0.5Low-Semibold.woff') format('woff');
  font-weight: 600; /* Semibold */
  font-style: normal;
  font-display: swap;
}

/* === VARIABLES === */

:root {
  --color-blue: #004ea8;
  --color-red: #f04b0f;
  --color-green: #009b37;
  --color-yellow: #ffe400;
}

/* === BASE === */

html, body {
  font-family: 'Roba Low', sans-serif;
  font-weight: 500;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  min-height: 100vh; /* make footer stick below content */
}

html {
  background-image: url('media/BG3.jpg');
  background-size: cover;          /* cover entire area */
  background-position: center;     /* center horizontally & vertically */
  background-repeat: no-repeat;
}

body {
  /* background-color: var(--color-blue); */
  transition: background-color 0.45s ease-in-out;
}

body.warning-flash {
  background-color: var(--color-red);
}

h1, h2, h3, h4, h5, h6 {
  font-family: 'Roba Low', sans-serif;
  font-weight: 600;
}

h1 {
  font-size: 2rem;
  margin: 0;
}

h2 {
  font-size: 1.4rem;
  margin: 0;
}

h1, h2 {
  text-shadow: 2px 4px 10px rgba(0, 0, 0, 0.5);
}

p {
  /* font-size: clamp(1.25rem, 0.75rem + 1.5vw, 2rem); */
  font-size: 1.1rem;
  text-align: center;
}

/* ====== HEADER ====== */

header {
  display: flex;
  flex-direction: column;
  align-items: center; 
  position: relative;
  /* text-align: center; */
  /* padding-top: 2rem; */
}

#scoreboard-container {
  position: absolute;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}

#scoreboard {
  font-family: 'Roba High', sans-serif;
  font-weight: 600;
  font-size: 14vh;
  /* font-size: clamp(3rem, 8vw, 6rem); */
  color: white;
  text-shadow: 5px 8px 3px rgba(0, 0, 255, 0.5);
}

#intro {
  max-width: 800px;
  margin: 15vh auto 3rem auto; 
  font-size: clamp(1.25rem, 0.75rem + 1.5vw, 2rem);
  /* line-height: 1.4; */
  text-align: center;
  color: white;
  text-shadow: 2px 4px 3px rgba(0, 0, 255, 0.8);
}

/* === INPUTS === */

.inputs {
  display: flex;
  flex-wrap: wrap;       /* allow wrapping into column */
  justify-content: center;
  gap: 1rem;
}

.input-group {
  position: relative;
  display: inline-block;
  margin: 0 50px 0 50px;
  left: calc(-75px/4); 
} 

#key-input {
    height: 75px;
    width: 280px;
    padding: 0.6rem 0.8rem;
    font-family: 'Roba Low', sans-serif;
    font-weight: 600; 
    font-size: 2rem;
    color: #2563eb;
    caret-color: #2563eb;
    border: 5px solid #cbd5e1;
    outline: none;
    box-sizing: border-box;
}

#key-input {
    background: #ffe7c7;
}

#key-input:focus {
    border-color: #2563eb;
}

#key-input.wrong-key {
  background-color: rgba(255, 0, 0, 1);
  transition: background-color 0.5s;
}


/* === BUTTONS === */

button {
  font-family: 'Roba Low', sans-serif;
  font-weight: 600;
  border: none;
  border-radius: 9999px; 
  padding: 0.6rem 1.1rem;
  background: #2563eb;
  color: #ffffff;
  cursor: pointer;
  transition: background-color 0.15s ease, transform 0.05s ease;
  height: 75px;
  font-size: 1.5rem;
}

button:hover {
  background: #1d4ed8;
}

button:active {
  transform: translateY(1px);
}

button:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}


#submit-key-btn {
  position: absolute;
  right: -35px;
  width: 75px;
  height: 75px;
}

/* ====== Layout ====== */
main {
  flex: 1; /* push footer down */
  display: flex;
  justify-content: center;
  padding: 5rem 1rem 8rem 1rem
}

.medal-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 5rem; 
  align-items: flex-start;
  align-content: flex-start;
}


.medal {
  width: 500px;  
  height: 500px;
  min-width: 0;    
  flex: 0 0 auto;      
  border-radius: 50%;
  box-sizing: border-box; 
  margin: 0; 
  overflow: hidden; 
  display: flex; 
  align-items: center;
  justify-content: center;
}

.medal-inner {
  width: 100%;
  height: 100%;
  position: relative;
  transform-style: preserve-3d;
  transition: transform 0.8s;
  border-radius: 50%;
}

.medal.flipped .medal-inner {
  transform: rotateY(180deg);
}

.medal-front,
.medal-back, 
.medal-locked {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
  border-radius: 50%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  color: white;
  padding: 1rem;
  box-sizing: border-box;
  overflow: hidden;
  text-align: center;
  padding: 0 13%;
  box-shadow: 
  inset -1px -4px 5px 5px rgba(0, 0, 0, 0.55),
  inset 1px 2px 2px 5px rgba(255, 255, 255, 0.55);
}

.medal-front {
  background-color: var(--color-yellow);
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}

.medal-back {
  background-color: var(--color-blue);
  transform: rotateY(180deg);
  /* border: white solid 2px; */
}

.medal.locked {
  cursor: not-allowed;
  background-color: rgba(255, 255, 255, 0.2);
  /* border: dotted 4px white; */
  /* box-shadow: inset 5px 5px 5px 5px rgba(255, 255, 255, 0.55); */
  /* background-color: #9a9a9a;  */
}

@keyframes medal-glow {
  0%   { box-shadow: 0 0 50px 15px rgba(0,200,255,0.0); }
  50%  { box-shadow: 0 0 50px 15px rgba(255,255,0,0.8); }
  100% { box-shadow: 0 0 50px 15px rgba(0,200,255,0.0); }
}

@keyframes medal-spin {
  0%, 100% { transform: scale(0.8) rotateY(0deg); }
  50%      { transform: scale(1.2) rotateY(540deg); }
  100%     { transform: scale(1) rotateY(1080deg); }
}

.medal.unlocked {
  animation: medal-glow 2s ease-in-out infinite;
  /* order: -1; Negative order to put it first */
}

.medal.unlocked.celebrate {
  /* order: -1; Keep it first during celebration */
  animation: 
    medal-spin 1.5s ease-out;
}

.medal.opened { 
  order: 0; /* Normal order for already-opened medals */
}

.medal.locked { 
  order: 999; /* Positive order to put locked medals last */
}

.medal.locked .medal-locked { display: flex; }

.medal.locked .medal-front,
.medal.locked .medal-back { display: none; }

.medal.unlocked .medal-locked,
.medal.opened .medal-locked { display: none; }

.medal.unlocked .medal-front,
.medal.opened .medal-front,
.medal.unlocked .medal-back,
.medal.opened .medal-back { display: flex; }

.medal-fun-fact {
  color: var(--color-yellow);
}

.medal-proof {
  color: var(--color-yellow);
}

.medal-fun-fact, .medal-proof {
  margin: 0.25em;
}

.medal-fun-fact::before {
  content: attr(data-label) ": ";
  font-weight: bold;
  font-size: 1.5em;
}

.medal-proof::before {
  content: attr(data-label) ": ";
  font-weight: bold;
  font-size: 1.5em;
}


/* === FOOTER === */
footer {
  position: relative;
  padding: 1rem;
  color: white;
}

#impressum p {
  font-size: clamp(0.9rem, 0.5rem + 1vw, 1rem);
  text-align: center;
  color: white;
  max-width: 33vw;
  margin: 0 auto 2.6rem auto;
  text-shadow: 2px 4px 5px rgba(0, 0, 255, 0.5);
}

footer .logo {
  position: absolute;
  bottom: 3rem;
  left: 3rem;
  height: 150px;
}

#reset-btn {
  position: absolute;
  right: 3rem;
  bottom: 3rem;
  width: 150px;
  height: 150px;
  /* background-color: var(--color-red); */
}