html, body { margin: 0; height: 100%; background: #05060f; color: #cfd8ff; font-family: system-ui, sans-serif; }
main { min-height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; }
h1 { margin: 0; font-size: 1.4rem; letter-spacing: .1em; color: #ffd76a; }
canvas { max-width: 96vw; max-height: 82vh; aspect-ratio: 3 / 4; background: #0a0d24; border: 2px solid #2a3170; border-radius: 10px; box-shadow: 0 0 30px #2a317088; touch-action: none; cursor: none; }
.hint { margin: 0; font-size: .8rem; opacity: .7; }
#nameForm { display: flex; gap: 8px; }
#nameForm[hidden] { display: none; }
#nameForm input, #nameForm button { font: inherit; font-size: 1rem; padding: 8px 12px; border-radius: 8px; border: 2px solid #2a3170; background: #0a0d24; color: #cfd8ff; }
#nameForm button { background: #ffd76a; color: #05060f; border-color: #ffd76a; font-weight: bold; cursor: pointer; }
.hint a { color: #ffd76a; }

/* Telegram Mini App на весь экран: ниже кнопок «Закрыть» и «⋯» Telegram */
html.tgapp main { padding: calc(var(--tg-safe-area-inset-top, 0px) + var(--tg-content-safe-area-inset-top, 0px)) 0 var(--tg-safe-area-inset-bottom, 0px); box-sizing: border-box; }
/* на весь экран (fullscreen.js): только холст, как можно крупнее */
html.fs h1, html.fs .hint { display: none; }
html.fs canvas { max-height: 98vh; max-width: 98vw; }