/* font integration */
@font-face {
  font-family: 'DobraBlackItalic';
  src: url('res/fonts/DobraBlackItalic.otf') format('opentype');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'CormorantGaramond';
  src: url('res/fonts/CormorantGaramond-Regular.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}


/* common */
body {
  margin: 0;
  padding: 0;
  font-family: 'CormorantGaramond', serif;
  background: url("res/images/bg.webp") no-repeat center center;
  background-color: #121212;
  color: #f0f0f0;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;

  min-height: 100vh;
  padding-top: 40px;
}

h1, h2 {
  color: #ffffff;
  margin-bottom: 20px;
  text-align: center;
}

/* overlays */
.overlay-img {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;

  object-fit: cover;
  pointer-events: none;

  opacity: 0;
  transition: opacity 0.15s ease-out;
  z-index: 9999;
}

.overlay-img.show {
  opacity: 1;
}




/* title */
.elysiumdle {
  font-family: 'DobraBlackItalic', sans-serif;
  font-size: 4rem;
  letter-spacing: 3px;
  color: #ffffff;
  text-align: center;

  margin-top: 10px;
  margin-bottom: 20px;

  text-shadow: 
    0 0 10px rgba(255,255,255,0.3),
    0 0 20px rgba(255,255,255,0.2);
}


/* question */
#question {
  position: absolute;
  top: 5px;
  width: 90%;

  font-size: 1.4rem;
  padding: 5px 20px;
  border-radius: 1px;

  color: #c13515;
  text-align: center;
}


/* input */
.input-wrapper {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 20px;
}

#guess {
  height: 44px;
  width: 260px;
  padding: 0 12px;

  font-size: 16px;
  border: none;
  border-radius: 8px;

  background-color: #2a2a2a;
  color: #fff;

  outline: none;
  transition: background-color 0.3s;
}

#guess:focus {
  background-color: #333;
}

.arrow-btn {
  height: 44px;
  width: 50px;

  display: flex;
  align-items: center;
  justify-content: center;

  background-color: #333;
  color: #fff;

  border: none;
  border-radius: 8px;
  cursor: pointer;

  font-size: 20px;
  transition: background-color 0.2s, transform 0.1s;
}

.arrow-btn:hover {
  background-color: #555;
}

.arrow-btn:active {
  transform: scale(0.95);
}


/* autocomplete */
#results {
  margin-top: 10px;
  width: 320px;
}

.suggestion {
  background-color: #1e1e1e;
  padding: 10px;
  margin-bottom: 6px;

  border-radius: 6px;
  cursor: pointer;

  transition: background-color 0.2s;
  border-left: 4px solid #444;
}

.suggestion:hover {
  background-color: #333;
  border-left-color: #6a5acd;
}


/* "mainframe" */
#status {
  background: url("res/images/Mainframe.png") no-repeat center center;
  background-size: cover;
  background-position: 100% 43%;

  width: 400px;
  height: 400px;

  position: relative;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;

  color: #fff;
  text-align: center;
  padding: 20px;
}


/* attempts */
#attempt-history {
  width: 400px;

  font-size: 0.95rem;
  color: #fff;
  text-align: left;
}

.attempt-line {
  margin-bottom: 4px;
  margin-left: 50px;
  font-size: 1.2rem;
}

.correct {
  color: #4caf50;
}

.wrong {
  color: #f44336;
}

#attempt-info {
  font-size: 1.1rem;
}


/* footer */
.footer {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  padding: 20px;
  margin-top: 24px;

  border: 1px solid #888888;
  background-color: #343434;

  box-shadow: 1px -1px 11px 0px rgba(200,200,200,0.75);
  text-align: center;
}


/* button feedback */
#submitGuess {
  border: none;
  color: #fff;

  padding: 10px 16px;
  border-radius: 6px;

  cursor: pointer;
  transition: background-color 0.2s ease;
}

#submitGuess:hover,
#submitGuess.active {
  background-color: #90270F;
}


/* flash anims */
.flash-correct {
  animation: flashGreen 0.6s ease-out;
}

@keyframes flashGreen {
  0%   { color: #4caf50; transform: scale(1.05); }
  100% { color: #ffffff; transform: scale(1); }
}

.flash-wrong {
  animation: flashRed 0.6s ease-out;
}

@keyframes flashRed {
  0%   { color: #f44336; transform: scale(1.05); }
  100% { color: #ffffff; transform: scale(1); }
}


/* mobile adaption */
@media (max-width: 500px) {
  #guess {
    width: 70%;
  }

  #results {
    max-height: 150px;
    overflow-y: auto;
    overflow-x: hidden;
    border: 1px solid #444;
    border-radius: 4px;
    background: #222;
    position: absolute;
    z-index: 1000;
    width: 90%;
  }
}