.landing { max-width: 420px; margin: 0 auto; }
.hero { padding: 24px 24px 0; }
.eyebrow {
    margin-bottom: 15px;
    color: var(--orange);
    font-size: .6875rem;
    font-weight: 650;
    letter-spacing: 1.6px;
    line-height: 1.4;
}
h1 { font-size: 2.6875rem; line-height: 1.08; letter-spacing: -1.5px; }
.description { color: var(--muted); font-size: .9375rem; line-height: 1.6; margin-top: 18px; max-width: 300px; }
.hero-actions { margin-top: 25px; }
.guest-note { color: var(--muted); text-align: center; font-size: .75rem; line-height: 1.5; margin-top: 11px; }
.screen-gallery { margin: 29px 24px 0; border-radius: 20px; overflow: hidden; background: #d0e9f4; }
.gallery-track {
    display: flex;
    margin: 0;
    padding: 0;
    list-style: none;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    overscroll-behavior-x: contain;
}
.gallery-track::-webkit-scrollbar { display: none; }
.gallery-slide { flex: 0 0 100%; min-width: 0; scroll-snap-align: start; }
.gallery-slide img { display: block; width: 100%; height: auto; aspect-ratio: 9 / 16; }
.gallery-controls {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr) 44px;
    gap: 8px;
    align-items: center;
    padding: 0 12px 15px;
    background: #bfdfef;
    color: #263c50;
}
.gallery-controls button {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border: 1px solid #98c3d9;
    border-radius: 50%;
    background: transparent;
    color: inherit;
    font: inherit;
    font-size: 1.3125rem;
}
.gallery-controls button:focus-visible { outline-color: #263c50; }
.gallery-position { text-align: center; font-size: .75rem; line-height: 1.5; }
.gallery-dots { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 5px; margin-bottom: 4px; }
.gallery-dot { display: block; width: 5px; height: 5px; border-radius: 50%; background: #7598ac; }
.gallery-dot.is-current { width: 17px; border-radius: 4px; background: #216fce; }
.about { padding: 29px 24px 0; }
h2 { color: var(--orange); font-size: 1.6875rem; line-height: 1.25; letter-spacing: -.65px; }
.about > .description { margin-top: 10px; font-size: .875rem; line-height: 1.65; }
.how-to-play { border-top: 1px solid var(--line); margin-top: 24px; }
.how-to-play summary { padding: 16px 0; font-size: .875rem; font-weight: 600; min-height: 48px; }
.detail-row { border-top: 1px solid var(--line); padding: 16px 0; }
.detail-row h3 { font-size: .875rem; font-weight: 600; }
.detail-row p { margin-top: 5px; color: var(--muted); font-size: .875rem; line-height: 1.65; }
.final-download { margin-top: 20px; }
@media (max-width: 360px) {
    .site-header { padding-left: 20px; padding-right: 20px; }
    .hero, .about, .site-footer { padding-left: 20px; padding-right: 20px; }
    h1 { font-size: 2.375rem; }
    .brand { font-size: .875rem; }
}

@media (min-width: 600px) {
    .landing { border: 1px solid var(--line); border-radius: 20px; margin-top: 32px; margin-bottom: 32px; }
}