/* Styles extracted from index.html. Keeps the original visual appearance exactly.
   - Uses --vh variable set by JS to handle mobile browser chrome.
   - Keeps font stack, background, spacing and sizes from the original.
*/

*, *::before, *::after { box-sizing: border-box; }
html, body { height: 100%; -webkit-text-size-adjust: 100%; }

:root {
  --bg: #f0f0f0;
  --fg: #333;
  --max-width: 800px;
  --vh: 1vh; /* will be overwritten by JS */
}

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

  height: calc(var(--vh, 1vh) * 100);

  margin: 0;
  background-color: var(--bg);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif;
  color: var(--fg);
  line-height: 1.4;
  padding: 20px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

.placeholder-text {
  max-width: var(--max-width);
  text-align: left;
  /* Responsive typography: scale smoothly between 1.4rem and 1.8rem */
  font-size: clamp(1.4rem, calc(1rem + 2.2vw), 1.8rem);
  font-weight: bold;
  overflow-wrap: break-word;
}