/* Landing page: the dot word and one soft card per game category. */
.home-page { max-width: 1100px; margin: 0 auto; padding: env(safe-area-inset-top) 16px 24px; position: relative; }
.hero-wrap { position: relative; height: min(40vh, 340px); margin-top: 16px; }
#hero { width: 100%; height: 100%; display: block; touch-action: pan-y; }
.tagline {
    position: absolute; left: 0; right: 0; bottom: 0; margin: 0; text-align: center;
    color: var(--muted); letter-spacing: .12em; text-transform: uppercase; font-size: .85rem; pointer-events: none;
}
.blocks { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; margin-top: 24px; }
.block {
    --c: var(--c-logic);
    padding: 16px; background: var(--card); border: 1px solid var(--line); border-radius: 16px;
    box-shadow: var(--shadow); backdrop-filter: blur(6px);
}
.c-memory { --c: var(--c-memory); }
.c-letters { --c: var(--c-letters); }
.c-creative { --c: var(--c-creative); }
.c-action { --c: var(--accent-2); }
.c-strategy { --c: var(--c-memory); }
.block:last-child:nth-child(odd) { grid-column: 1 / -1; }
.block h2 { display: flex; align-items: center; gap: 12px; margin: 0 0 14px; font-size: 1.1rem; color: var(--c); }
.block h2 .ico {
    display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; font-size: 22px;
    background: rgba(109, 93, 246, .14); background: color-mix(in srgb, var(--c) 14%, transparent); border-radius: 12px;
}
.tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.tile {
    position: relative; display: flex; flex-direction: column; align-items: center; gap: 6px;
    padding: 14px 6px 10px; text-align: center; text-decoration: none; color: var(--text);
    background: rgba(109, 93, 246, .08); background: color-mix(in srgb, var(--c) 8%, transparent); border: 1px solid transparent; border-radius: 12px;
    font-weight: 600; font-size: .85rem; transition: border-color .2s, transform .2s;
}
.tile .ico { font-size: 32px; line-height: 1; }
a.tile { background: var(--solid); border-color: var(--line); }
a.tile:hover, a.tile:focus-visible { border-color: var(--c); transform: translateY(-2px); outline: none; }
.tile.soon { opacity: .55; }
.tile .tag {
    position: absolute; top: -8px; right: -4px; background: var(--c); color: #fff; font-size: .68rem;
    padding: 2px 8px; border-radius: 999px;
}
@media (max-width: 760px) {
    .blocks { grid-template-columns: 1fr; }
}
@media (max-width: 520px) {
    .hero-wrap { height: 34vh; }
}
@media (prefers-reduced-motion: reduce) {
    .tile { transition: none; }
    a.tile:hover { transform: none; }
}
.get-app { display: block; width: fit-content; margin: 18px auto 0; text-align: center; padding: 10px 18px; border-radius: 999px; background: var(--accent); color: #fff; font-weight: 700; text-decoration: none; min-height: 44px; line-height: 24px; box-sizing: border-box; }
.get-app[hidden] { display: none; }