/* =========================
   GLOBAL
========================= */

:root {
  --app-height: 100dvh;
}

html,
body {
  width: 100%;
  height: 100%;

  margin: 0;
  padding: 0;

  font-family: Arial, sans-serif;

  background: #f5f5f5;

  overflow: hidden;

  overscroll-behavior-y: contain;

  touch-action: manipulation;
}


/* =========================
   GAME CONTAINER
========================= */

.game-container {
  width: 60%;

  margin: 0 auto;

  height: var(--app-height);

  display: flex;
  flex-direction: column;

  gap: 8px;

  padding: 8px;

  box-sizing: border-box;

  overflow: hidden;

  position: relative;
}


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

#heading {
  flex: 0 0 auto;

  display: flex;

  justify-content: space-between;

  align-items: center;

  padding: 8px 0;
}


/* =========================
   CENTER CONTAINER
========================= */

.center {
  flex: 1 1 auto;

  min-height: 0;

  display: flex;
  flex-direction: column;

  align-items: center;

  gap: 12px;

  padding: 8px 0;

  box-sizing: border-box;

  overflow: hidden;
}


/* =========================
   TEXT DISPLAY
========================= */

#textDisplay {
  flex: 1 1 auto;

  min-height: 0;

  width: 100%;
  max-width: 100%;

  overflow-y: auto;
  overflow-x: hidden;

  -webkit-overflow-scrolling: touch;

  overscroll-behavior: contain;

  font-size: clamp(16px, 4vw, 20px);

  line-height: 1.6;

  padding: 12px;

  box-sizing: border-box;

  border-radius: 12px;

  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.08);

  word-wrap: break-word;
}


/* =========================
   WORD STATES
========================= */

.word {
  color: #979696;
}

.correct-letter {
  color: #2ecc71;
}

.wrong-letter {
  color: #e74c3c;
}

.word-flash {
  color: #2ecc71;
}

.word-error {
  color: #e74c3c;

  background-color:
    rgba(204, 46, 46, 0.12);

  border-radius: 6px;

  padding: 2px 4px;

  font-weight: 500;
}


/* =========================
   ACTIVE WORD
========================= */

.word-active {
  background-color:
    rgba(46, 204, 113, 0.12);

  border-radius: 6px;

  padding: 2px 4px;

  font-weight: 500;

  color: #3ca3e7;
}


/* =========================
   INPUT
========================= */

input {
  flex: 0 0 auto;

  width: 100%;

  min-height: 48px;

  padding: 14px 18px;

  box-sizing: border-box;

  font-size: max(16px, 1rem);

  border-radius: 10px;

  border: 2px solid #ddd;

  outline: none;

  background: white;

  transition:
    border-color 0.2s ease,
    box-shadow 0.2s ease;

  position: relative;

  z-index: 5;

  transform: translateZ(0);

  scroll-margin-bottom: 16px;
}

input:focus {
  border-color: #111;

  box-shadow:
    0 0 0 4px rgba(0, 0, 0, 0.08);
}


/* =========================
   BUTTONS
========================= */

button {
  width: 100%;
  max-width: 260px;

  padding: 14px 18px;

  font-size: clamp(16px, 4vw, 18px);

  font-weight: 500;

  cursor: pointer;

  background: #fff;

  color: #111;

  border-radius: 10px;

  border: 2px solid #ddd;

  outline: none;

  box-shadow:
    0 8px 20px rgba(0, 0, 0, 0.12);

  transition:
    color 0.2s ease,
    border-color 0.2s ease,
    box-shadow 0.2s ease,
    transform 0.15s ease;

  touch-action: manipulation;
}

button:hover {
  color: #2ecc71;

  border-color: #2ecc71;

  box-shadow:
    0 8px 20px rgba(46, 204, 113, 0.2);

  transform: translateY(-2px);
}

button:active {
  transform: translateY(0);

  box-shadow:
    0 4px 12px rgba(46, 204, 113, 0.18);
}


/* =========================
   MOBILE
========================= */

@media (max-width: 768px),
(max-height: 500px) {

  body {
    font-size: 16px;
  }

  .game-container {
    width: 100%;

    padding: 8px;
  }

}