* { margin: 0; padding: 0; box-sizing: border-box; }
html, body {
    width: 100%; height: 100%; overflow: hidden;
    background: #ffffff;
    font-family: Arial, sans-serif;
}
canvas { display: block; }

/* Live word input — top center, no label, no buttons */
#word-input {
    position: fixed;
    top: 24px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 10;
    width: min(560px, calc(100vw - 48px));
    background: #ffffff;
    border: 1px solid rgba(12, 12, 12, 0.2);
    border-radius: 8px;
    box-shadow: 0 4px 16px rgba(12, 12, 12, 0.08);
    color: #0c0c0c;
    font-family: Arial, sans-serif;
    font-size: 15px;
    text-align: center;
    padding: 10px 16px;
}
#word-input:focus {
    outline: none;
    border-color: #fb002c;
    box-shadow: 0 4px 16px rgba(251, 0, 44, 0.15);
}

#site-footer {
  margin-top: 64px;
  padding-top: 20px;
  border-top: 1px solid var(--border);
  font-family: Arial, sans-serif;
  font-size: 12px;
  color: #0c0c0c;
}