.start-screen {
    position: fixed;
    z-index: 1000;
    inset: 0;
    display: grid;
    place-items: center;
    padding: 1rem;
    background: radial-gradient(circle at 50% 20%, #41739b, #14213d 58%, #08111f);
}

.start-card {
    display: grid;
    width: min(680px, 100%);
    gap: .8rem;
    place-items: center;
    padding: clamp(2rem, 8vw, 5rem) clamp(1rem, 6vw, 4rem);
    border: 3px solid #f4d58d;
    border-radius: 2rem;
    color: #fffaf0;
    background: rgb(20 33 61 / 78%);
    box-shadow: 0 24px 80px rgb(0 0 0 / 45%);
    text-align: center;
}

.start-mark { font-size: clamp(3rem, 10vw, 6rem); }
.start-title { font-family: Georgia, serif; font-size: clamp(2.1rem, 8vw, 4.8rem); font-weight: 800; line-height: 1; }
.start-subtitle { font-size: clamp(1rem, 3vw, 1.3rem); }
.keyboard-start,.touch-start { margin-top: 1rem; color: #ffd166; font-size: clamp(1rem, 3vw, 1.35rem); font-weight: 900; letter-spacing: .05em; text-transform: uppercase; }
.touch-start { display: none; }

@media (pointer: coarse), (hover: none) {
    .keyboard-start { display: none; }
    .touch-start { display: inline; }
}