/* Game Night landing page. Each game ships its own stylesheet (for example cluepalooza.css). */

.landing { max-width: 64rem; margin: 0 auto; padding: 2.5rem 1rem 3rem; }

.landing-header { text-align: center; margin-bottom: 2.5rem; }
.landing-icon { font-size: 4rem; line-height: 1; }
.landing-header h1 { color: var(--gold, #ffcc33); font-size: clamp(2rem, 6vw, 3.4rem); margin: .4rem 0; text-shadow: 3px 3px 0 #000; }
.landing-header p { font-size: 1.2rem; opacity: .85; margin: 0; }

.game-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr)); gap: 1.2rem; }

.game-card {
    position: relative; display: flex; flex-direction: column; border-radius: 1rem;
    background: var(--navy, #0b1a6b); color: var(--ink, #f4f6ff);
    border: 2px solid transparent; transition: transform .15s ease, border-color .15s ease;
}
.game-card:has(.game-link:hover), .game-card:has(.game-link:focus-visible) { transform: translateY(-4px); border-color: var(--gold, #ffcc33); }
.game-link { display: flex; flex: 1; flex-direction: column; gap: .3rem; padding: 1.5rem; border-radius: 1rem; color: inherit; text-decoration: none; }
.coming-soon { padding: 1.5rem; gap: .3rem; }
.game-gear {
    position: absolute; top: .8rem; right: .8rem; display: inline-flex; align-items: center; justify-content: center;
    width: 2.2rem; height: 2.2rem; border-radius: 50%; color: var(--ink, #f4f6ff); opacity: .55;
    transition: opacity .15s ease, background .15s ease, transform .3s ease;
}
.game-gear:hover, .game-gear:focus-visible { opacity: 1; background: #1a2ca0; transform: rotate(60deg); }
.game-icon { font-size: 2.6rem; line-height: 1; }
.game-card h2 { margin: .3rem 0 0; font-size: 1.6rem; color: var(--gold, #ffcc33); }
.game-tagline { margin: 0; font-weight: 600; }
.game-description { margin: .4rem 0 0; opacity: .8; flex: 1; }
.game-play { margin-top: 1rem; font-weight: 700; color: var(--gold, #ffcc33); }
.coming-soon { background: transparent; border: 2px dashed #394080; opacity: .7; }

@media (prefers-reduced-motion: reduce) { .game-card { transition: none; } .game-card:has(.game-link:hover) { transform: none; } .game-gear { transition: none; } .game-gear:hover { transform: none; } }

.account-bar { display: flex; gap: .8rem; justify-content: flex-end; align-items: center; margin-bottom: 1rem; font-size: .95rem; }
.account-bar a, .account-bar .link-btn { color: var(--gold, #ffcc33); }
.account-bar form { margin: 0; }
.landing.narrow { max-width: 28rem; }
.form-title { color: var(--gold, #ffcc33); text-shadow: 3px 3px 0 #000; margin: .3rem 0; }
.landing.narrow label { display: block; margin-bottom: .8rem; }
.notice { color: var(--good, #2eb872); }

.landing-logo { display: block; width: min(100%, 32rem); height: auto; margin: 0 auto .6rem; }
.visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }