* {
    box-sizing: border-box;
    }

html,
body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;

overflow: hidden;

background: #050505;

font-family:
“Outfit”,
sans-serif;
}

/* ============================================================
WELCOME SCREEN
============================================================ */

.welcome {

position: fixed;

inset: 0;

z-index: 10;

display: flex;

align-items: center;

justify-content: center;

width: 100vw;

height: 100dvh;

padding: 30px;

background:
radial-gradient(
circle at center,
#202020 0%,
#090909 45%,
#000000 100%
);

color: white;

transition:
opacity 0.5s ease,
visibility 0.5s ease;

}

.welcome.hidden {

opacity: 0;

visibility: hidden;

pointer-events: none;

}

.welcome-content {

width: 100%;

max-width: 430px;

text-align: center;

}

.logo {

margin-bottom: 50px;

font-size: 13px;

font-weight: 700;

letter-spacing: 0.3em;

opacity: 0.6;

}

h1 {

margin: 0 0 18px;

font-size:
clamp(
34px,
8vw,
58px
);

line-height: 1.05;

font-weight: 700;

letter-spacing: -0.04em;

}

.intro {

max-width: 360px;

margin:
0 auto 42px;

color:
rgba(
255,
255,
255,
0.62
);

font-size: 17px;

line-height: 1.5;

}

/* ============================================================
FORM
============================================================ */

#seat-form {

display: flex;

flex-direction: column;

gap: 12px;

}

#seat-form label {

text-align: left;

font-size: 13px;

font-weight: 600;

color:
rgba(
255,
255,
255,
0.7
);

}

#seat {

width: 100%;

height: 64px;

padding:
0 20px;

border:
1px solid
rgba(
255,
255,
255,
0.2
);

border-radius: 14px;

outline: none;

background:
rgba(
255,
255,
255,
0.08
);

color: white;

font-family:
“Outfit”,
sans-serif;

font-size: 24px;

text-align: center;

appearance: textfield;

}

#seat::-webkit-inner-spin-button,
#seat::-webkit-outer-spin-button {

appearance: none;

margin: 0;

}

#seat:focus {

border-color:
rgba(
255,
255,
255,
0.6
);

background:
rgba(
255,
255,
255,
0.12
);

}

#seat-form button {

height: 62px;

margin-top: 8px;

border: none;

border-radius: 14px;

background: white;

color: black;

font-family:
“Outfit”,
sans-serif;

font-size: 14px;

font-weight: 800;

letter-spacing: 0.08em;

cursor: pointer;

transition:
transform 0.15s ease,
opacity 0.15s ease;

}

#seat-form button:active {

transform:
scale(0.98);

opacity: 0.8;

}

/* ============================================================
ERROR
============================================================ */

.error {

min-height: 20px;

margin-top: 18px;

color:
#ff7777;

font-size: 14px;

}

/* ============================================================
LIGHTING SCREEN
============================================================ */

#screen {

position: fixed;

inset: 0;

z-index: 1;

width: 100vw;

height: 100dvh;

background:
rgb(0, 0, 0);

opacity: 1;

}

/* ============================================================
CONNECTION STATUS
============================================================ */

#status {

position: fixed;

left: 50%;

bottom: 20px;

z-index: 20;

transform:
translateX(-50%);

padding:
8px 14px;

border-radius: 20px;

background:
rgba(
0,
0,
0,
0.7
);

color: white;

font-size: 14px;

opacity: 0;

pointer-events: none;

transition:
opacity 0.2s ease;

}

#status.visible {

opacity: 1;

}