html, body { margin: 0; height: 100%; background: #fff7ed; overflow: hidden; overscroll-behavior: none; }
body { display: flex; align-items: center; justify-content: center; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
canvas { display: block; touch-action: none; }
#name-form { position: fixed; left: 50%; top: 22%; transform: translateX(-50%); width: min(320px, 86vw); display: flex; flex-direction: column; gap: 14px; align-items: stretch; font-family: system-ui, -apple-system, sans-serif; }
#name-form[hidden] { display: none; }
#name-label { font-size: 22px; font-weight: 700; color: #2b2340; text-align: center; line-height: 1.25; }
#name-input { font-size: 30px; font-weight: 700; padding: 14px 16px; border: 3px solid #7c3aed; border-radius: 18px; text-align: center; color: #2b2340; background: #fff; -webkit-user-select: text; user-select: text; }
#name-ok { font-size: 24px; font-weight: 800; padding: 14px; border: 0; border-radius: 999px; background: #f97316; color: #fff; }
#name-ok:disabled { opacity: 0.4; }