html, body { margin: 0; height: 100%; background: #000; overflow: hidden; }
[hidden] { display: none !important; }
body { font-family: system-ui, "Segoe UI", sans-serif; }

video { position: fixed; inset: 0; width: 100%; height: 100%;
        object-fit: cover; background: #000; }

.landing { position: fixed; inset: 0; z-index: 10;
           display: grid; place-content: center; justify-items: center; gap: 1rem;
           background: radial-gradient(circle at center, #1c1c1c, #000);
           color: #fff; text-align: center; }
.landing h1 { margin: 0; font-size: 1rem; font-weight: 400;
              letter-spacing: .25em; text-transform: uppercase; color: #777; }
.landing button { padding: .9rem 2.6rem; border: 1px solid #555; border-radius: 4px;
                  background: #141414; color: #eee; font-size: 1rem;
                  letter-spacing: .15em; text-transform: uppercase; cursor: pointer; }
.landing button:hover { background: #222; }
.landing p { margin: 0; color: #555; font-size: .75rem; }

.close-btn { position: fixed; top: 14px; right: 14px; z-index: 20;
             padding: .35rem .85rem; border: 1px solid #444; border-radius: 4px;
             background: rgb(0 0 0 / 55%); color: #aaa; font-size: .75rem;
             cursor: pointer; transition: top .18s ease, right .18s ease; }
.close-btn:hover { color: #fff; border-color: #777; }

.win { position: fixed; inset: 0; z-index: 30;
       display: grid; place-content: center; justify-items: center; gap: .8rem;
       background: #000; color: #ddd; text-align: center; padding: 2rem; }
.win h2 { margin: 0; font-size: 1.4rem; }
.win p { margin: 0; color: #888; max-width: 34ch; line-height: 1.5; }