/* Overlay window: everything outside the boxes stays transparent over the HDMI picture. */
html, body {
  margin: 0; padding: 0; width: 100%; height: 100%;
  background: transparent !important; overflow: hidden;
  font-family: sans-serif;
}
.hidden { opacity: 0; visibility: hidden; }

#subtitle {
  position: fixed; left: 50%; bottom: 8%;
  transform: translateX(-50%);
  max-width: 80%;
  padding: 6px 20px;
  border-radius: 12px;
  background: rgba(0, 0, 0, 0.6);
  text-align: center;
  transition: opacity 0.15s ease-out;
}
#text {
  color: #fff;
  font-weight: bold; font-size: 56px; line-height: 1.3;
  text-shadow: 0 0 4px #000, 0 2px 6px #000;
}
#previous {
  display: none;
  color: rgba(255, 255, 255, 0.65);
  font-weight: 600; line-height: 1.3;
  text-shadow: 0 1px 4px #000;
}
/* Area translation: placed by the phone, anywhere on the picture. */
#area {
  position: fixed; left: 0; top: 0;
  border-radius: 10px;
  color: #fff; font-weight: bold; line-height: 1.3;
  white-space: pre-wrap;
  text-shadow: 0 0 4px #000, 0 2px 6px #000;
  transition: opacity 0.15s ease-out;
}
#original {
  display: none;
  color: rgba(255, 255, 255, 0.8);
  font-weight: 600; line-height: 1.3;
  text-shadow: 0 1px 4px #000;
}
#original.shown { display: block; }

/* Pairing card, top right, only while no phone is connected. */
#pairing {
  position: fixed; top: 5%; right: 4%;
  width: 26%; padding: 20px 24px;
  border-radius: 20px; border: 2px solid #C99A45;
  background: rgba(23, 22, 20, 0.92);
  color: #E8E2D6; text-align: center;
  transition: opacity 0.2s ease-out;
}
#pairing .title { color: #F6D58E; font-size: 26px; font-weight: bold; margin-bottom: 12px; }
#pairing .label { color: #9A948A; font-size: 16px; letter-spacing: 3px; margin-top: 10px; }
#code { color: #F6D58E; font-size: 52px; font-weight: bold; letter-spacing: 4px; }
#countdown { color: #9A948A; font-size: 16px; }
#address { color: #fff; font-size: 26px; font-weight: bold; }
#status { color: #FFB36B; font-size: 16px; margin-top: 8px; }
#pairing .hint { color: #9A948A; font-size: 16px; margin-top: 12px; line-height: 1.4; }
#pairing .steps { text-align: left; color: #E8E2D6; font-size: 19px; line-height: 1.4; margin: 14px 0 0; padding-left: 26px; }
#pairing .steps li { margin-top: 4px; }
#pairing .steps b { color: #F6D58E; }
#pairing .warn { text-align: left; color: #FFB36B; font-size: 16px; line-height: 1.4; margin-top: 10px; }

/* Update notice: a short card on the left at launch, and a line in the pairing card. */
#update {
  position: fixed; left: 2%; top: 3%; max-width: 40%;
  padding: 10px 16px; border-radius: 12px;
  background: rgba(0, 0, 0, 0.78); border: 1px solid #F6D58E;
  color: #F6D58E; font-size: 20px; line-height: 1.35;
  transition: opacity 0.3s ease-out;
}
#newer { color: #F6D58E; font-size: 16px; margin-top: 8px; }

/* "Dịch menu", area and dialogue boxes at the game's own text (boxes.js). */
.ctbox {
  position: fixed; box-sizing: border-box;
  border-radius: 8px;
  /* Regular weight and one soft shadow: bold with a heavy halo read as blurry blocks on a TV. */
  font-weight: 500; line-height: 1.35;
  white-space: pre-wrap; word-wrap: break-word;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
  -webkit-font-smoothing: antialiased;
}