/*
    Shared styling for the Games area: the tiles on /Games and the individual
    game pages. Lifted out of the Winged Warriors partial, which carried all
    of this inline, so the three game pages read as one family instead of
    three unrelated designs.

    Each page sets its own accent by adding a modifier class to the wrapper:
    the two accent variables drive the hero gradient and the play button.
*/

.game-page {
    --accent-1: #667eea;
    --accent-2: #764ba2;
}

.game-page--convoy {
    --accent-1: #2b2f36;
    --accent-2: #c2410c;
}

.game-page--mememe {
    --accent-1: #f7971e;
    --accent-2: #d62976;
}

/* ---------- Hero ---------- */

.game-hero {
    background: linear-gradient(135deg, var(--accent-1) 0%, var(--accent-2) 100%);
    padding: 60px 0;
    margin-bottom: 40px;
    color: white;
    text-align: center;
    position: relative;
    overflow: hidden;
}

.game-hero::before {
    content: "";
    position: absolute;
    top: -50%;
    right: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.1) 1px, transparent 1px);
    background-size: 20px 20px;
    animation: drift 20s linear infinite;
    pointer-events: none;
}

@keyframes drift {
    from { transform: translate(0, 0); }
    to { transform: translate(20px, 20px); }
}

@media (prefers-reduced-motion: reduce) {
    .game-hero::before {
        animation: none;
    }
}

.game-title {
    font-size: 3.5rem;
    font-weight: bold;
    margin-bottom: 20px;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2);
    position: relative;
    z-index: 1;
}

.game-subtitle {
    font-size: 1.3rem;
    opacity: 0.95;
    margin-bottom: 30px;
    position: relative;
    z-index: 1;
}

.game-icon {
    width: 200px;
    height: 200px;
    border-radius: 25px;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    margin-bottom: 30px;
}

.game-icon:hover {
    transform: translateY(-5px) scale(1.05);
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.4);
}

/* Art that is a flat illustration rather than a rounded app icon. */
.game-icon--art {
    width: 260px;
    height: auto;
    border-radius: 0;
    box-shadow: none;
    filter: drop-shadow(0 18px 30px rgba(0, 0, 0, 0.35));
}

.game-icon--art:hover {
    box-shadow: none;
}

.game-badge {
    display: inline-block;
    padding: 6px 16px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.18);
    border: 1px solid rgba(255, 255, 255, 0.35);
    font-size: 0.85rem;
    letter-spacing: 1px;
    text-transform: uppercase;
    position: relative;
    z-index: 1;
}

/* ---------- Store / play buttons ---------- */

.store-buttons {
    display: flex;
    gap: 20px;
    justify-content: center;
    flex-wrap: wrap;
    margin: 40px 0;
}

.store-button {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 14px 28px;
    background: #000;
    color: white;
    text-decoration: none;
    border-radius: 8px;
    font-size: 1.1rem;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

.store-button:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
    color: white;
    text-decoration: none;
}

.google-play-button,
.app-store-button {
    background: #000;
}

.google-play-button:hover,
.app-store-button:hover {
    background: #2c2c2c;
}

.web-play-button {
    background: linear-gradient(135deg, var(--accent-1) 0%, var(--accent-2) 100%);
}

.web-play-button:hover {
    filter: brightness(1.15);
}

/* ---------- Feature grid ---------- */

.feature-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 30px;
    margin: 50px 0;
}

.feature-card {
    background: white;
    padding: 30px;
    border-radius: 12px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    text-align: center;
}

.feature-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.12);
}

.feature-icon {
    font-size: 3rem;
    margin-bottom: 15px;
}

.feature-title {
    font-size: 1.3rem;
    font-weight: bold;
    margin-bottom: 10px;
    color: #333;
}

.feature-description {
    color: #666;
    line-height: 1.6;
}

/* ---------- Stats ---------- */

.game-stats {
    display: flex;
    justify-content: center;
    gap: 40px;
    margin: 40px 0;
    flex-wrap: wrap;
}

.stat-item {
    text-align: center;
}

.stat-value {
    font-size: 2rem;
    font-weight: bold;
    color: var(--accent-2);
}

.stat-label {
    color: #666;
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* ---------- Closing section ---------- */

.gameplay-section {
    background: #f8f9fa;
    padding: 60px 0;
    margin: 40px -15px;
}

.section-title {
    font-size: 2.5rem;
    text-align: center;
    margin-bottom: 40px;
    color: #333;
}

.gameplay-video {
    max-width: 800px;
    margin: 0 auto;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
}

/* ---------- Tiles on the games landing page ---------- */

.game-tiles {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 30px;
    margin: 40px 0;
    padding: 0;
    list-style: none;
}

.game-tile {
    display: flex;
    flex-direction: column;
    background: white;
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    color: inherit;
    text-decoration: none;
    height: 100%;
}

.game-tile:hover,
.game-tile:focus {
    transform: translateY(-6px);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.15);
    text-decoration: none;
    color: inherit;
}

.game-tile__art {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 180px;
    background: linear-gradient(135deg, var(--accent-1) 0%, var(--accent-2) 100%);
    padding: 20px;
}

.game-tile__art img {
    max-height: 140px;
    max-width: 100%;
    border-radius: 12px;
}

.game-tile__body {
    padding: 24px;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

.game-tile__title {
    font-size: 1.4rem;
    font-weight: bold;
    margin-bottom: 8px;
    color: #333;
}

.game-tile__blurb {
    color: #666;
    line-height: 1.6;
    margin-bottom: 18px;
    flex-grow: 1;
}

.game-tile__meta {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 16px;
}

.game-tile__platform {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    padding: 4px 10px;
    border-radius: 999px;
    background: #f1f3f5;
    color: #555;
}

.game-tile__cta {
    font-weight: bold;
    color: var(--accent-2);
}

.game-tile:hover .game-tile__cta {
    text-decoration: underline;
}