/* Styles for the DrumVR play page (start screen). */
html{height:100%}
body.play{margin:0;height:100%;overflow:hidden}
:root{--veil-side:linear-gradient(90deg,rgba(236,238,242,.97) 0%,rgba(236,238,242,.9) 40%,rgba(236,238,242,0) 82%);--veil-down:linear-gradient(180deg,rgba(236,238,242,0) 0%,rgba(236,238,242,.93) 42%,rgba(236,238,242,.98) 100%)}
@media (prefers-color-scheme:dark){:root{--veil-side:linear-gradient(90deg,rgba(14,10,18,.96) 0%,rgba(14,10,18,.86) 40%,rgba(14,10,18,0) 82%);--veil-down:linear-gradient(180deg,rgba(14,10,18,0) 0%,rgba(14,10,18,.92) 42%,rgba(14,10,18,.98) 100%)}}
#stage{position:fixed;inset:0;z-index:0}
#stage canvas{display:block;width:100%;height:100%}
#landing{position:fixed;inset:0;z-index:1;display:flex;align-items:center;overflow:auto;padding:max(24px,env(safe-area-inset-top,0px)) max(24px,6vw) max(24px,env(safe-area-inset-bottom,0px));background:var(--veil-side)}
#landing.hidden{display:none}
.play-wrap{max-width:32rem;margin:auto 0}
.play-wrap .wordmark{margin-bottom:1.6rem}
.play h1{font-size:clamp(4.4rem,14vw,8.5rem);line-height:.84;margin:0 0 .3em}
.play .lede{font-size:1.15rem;margin:0 0 1.5rem}
#enter{font-size:1.1rem;padding:.95rem 2rem}
#enter:disabled{background:var(--surface-2);color:var(--muted);border-color:var(--line);cursor:default;transform:none}
#status{margin:.9rem 0 0;font-size:.98rem;line-height:1.45;color:var(--muted);min-height:1.45em}
.controls{margin:1.8rem 0 0;padding:1.1rem 0 0;border-top:1px solid var(--line);list-style:none;font-size:.98rem;line-height:1.6;color:var(--muted)}
.controls li+li{margin-top:.15rem}
.play-note{margin:1rem 0 0;font-size:.92rem;line-height:1.5;color:var(--muted);max-width:30rem}
.play-links{display:flex;flex-wrap:wrap;gap:.4rem 1.2rem;margin:1.4rem 0 0;font-size:.95rem}
@media (max-width:720px){#landing{align-items:flex-end;background:var(--veil-down)}.play-wrap{max-width:none}}