:root { color-scheme: light dark; --bg: #e6e6e6; --fg: #3c3c3c; --accent: #2b579a; --track: #cfcfcf; }
@media (prefers-color-scheme: dark) { :root { --bg: #1f1f1f; --fg: #e0e0e0; --accent: #6ea0e8; --track: #444; } }
html, body { margin: 0; padding: 0; width: 100%; height: 100%; overflow: hidden; background: var(--bg); }
#wordcraft_canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
#wordcraft_loading { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 14px; color: var(--fg); font: 14px system-ui, sans-serif; text-align: center; padding: 0 24px; background: var(--bg); pointer-events: none; }
#wordcraft_status { max-width: 460px; line-height: 1.4; }
.spin { width: 28px; height: 28px; border: 3px solid var(--track); border-top-color: var(--accent); border-radius: 50%; animation: spin 0.9s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .spin { animation-duration: 3s; } }
#wordcraft_loading.failed .spin, #wordcraft_loading.gate .spin { display: none; }
#wordcraft_loading.gate #wordcraft_status { font-size: 18px; font-weight: 600; }
.nojs { position: absolute; top: 40%; width: 100%; text-align: center; color: var(--fg); font: 15px system-ui, sans-serif; }