﻿/* GAMEVO Homepage V2 */

.logo { cursor: pointer; transition: all 0.3s ease; }
.logo:hover { opacity: 0.8; }

.home-shell {
    position: relative; isolation: isolate; min-height: calc(100vh - 180px); padding: 1.35rem 2rem 2.4rem;
    background: radial-gradient(circle at 10% 0%, rgba(29,209,161,.12), transparent 22rem), radial-gradient(circle at 90% 10%, rgba(29,209,161,.08), transparent 18rem), linear-gradient(180deg,#020706 0%,#050b0d 48%,#020706 100%);
}
.home-shell::before,.home-shell::after { content:''; position:absolute; inset:0; pointer-events:none; z-index:-1; }
.home-shell::before { opacity:.2; background-image:linear-gradient(rgba(29,209,161,.08) 1px,transparent 1px),linear-gradient(90deg,rgba(29,209,161,.08) 1px,transparent 1px),repeating-linear-gradient(135deg,rgba(255,255,255,.018) 0 1px,transparent 1px 18px); background-size:42px 42px,42px 42px,auto; mask-image:linear-gradient(180deg,black,rgba(0,0,0,.55),transparent 95%); }
.home-shell::after { background:radial-gradient(circle at 50% 0%,rgba(255,255,255,.035),transparent 18rem),linear-gradient(135deg,transparent 0 48%,rgba(29,209,161,.028) 49%,transparent 50%); background-size:auto,20px 20px; opacity:.48; }
.home-panel { position:relative; max-width:1400px; margin:0 auto 1rem; border:1px solid rgba(29,209,161,.16); border-radius:16px; background:linear-gradient(180deg,rgba(255,255,255,.018),transparent 22%),linear-gradient(135deg,rgba(29,209,161,.035),transparent 36%),rgba(4,11,12,.86); box-shadow:inset 0 1px 0 rgba(255,255,255,.025),0 18px 38px rgba(0,0,0,.18); }
.home-hero { min-height:220px; padding:1.25rem 1.35rem; display:flex; align-items:center; justify-content:space-between; gap:1rem; overflow:hidden; background:radial-gradient(circle at 82% 40%,rgba(29,209,161,.16),transparent 14rem),linear-gradient(135deg,rgba(29,209,161,.14),rgba(29,209,161,.04) 34%,rgba(255,255,255,.012)),rgba(4,12,13,.9); }
.home-hero::after { content:''; position:absolute; top:-38%; right:-8%; width:34%; height:190%; background:repeating-linear-gradient(90deg,transparent 0 18px,rgba(29,209,161,.08) 18px 19px); opacity:.2; transform:skewX(-18deg); }
.home-hero-copy,.home-hero-meta { position:relative; z-index:1; }
.home-kicker,.home-section-head span { display:inline-block; color:var(--primary-color); font-size:.72rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; }
.home-hero h1 { max-width:760px; margin:.35rem 0 .5rem; color:var(--text-light); font-size:clamp(1.35rem,2vw,2rem); line-height:1.15; }
.home-hero p { max-width:640px; margin:0; color:var(--text-muted); font-size:.92rem; }
.home-hero-actions { display:flex; flex-wrap:wrap; gap:.55rem; margin-top:.95rem; }
.home-btn { display:inline-flex; align-items:center; justify-content:center; min-height:40px; padding:.68rem .9rem; border-radius:10px; text-decoration:none; font-size:.86rem; font-weight:700; transition:var(--transition); }
.home-btn-primary { background:var(--primary-color); color:var(--bg-dark); }
.home-btn-secondary { border:1px solid rgba(29,209,161,.2); background:rgba(0,0,0,.2); color:var(--text-light); }
.home-btn:hover { transform:translateY(-2px); }
.home-btn-secondary:hover { border-color:rgba(29,209,161,.4); color:var(--primary-color); }
.home-hero-meta { display:grid; grid-template-columns:repeat(3,minmax(76px,1fr)); gap:.5rem; min-width:280px; }
.home-hero-meta div { padding:.7rem .65rem; border:1px solid rgba(29,209,161,.18); border-radius:10px; background:rgba(0,0,0,.22); text-align:center; }
.home-hero-meta strong,.home-hero-meta span { display:block; }
.home-hero-meta strong { color:var(--primary-color); font-size:1rem; }
.home-hero-meta span { color:var(--text-muted); font-size:.66rem; letter-spacing:.06em; text-transform:uppercase; }
.home-section { padding:1rem; }
.home-section-head { display:flex; align-items:flex-end; justify-content:space-between; gap:1rem; margin-bottom:.85rem; }
.home-section-head h2 { margin:.15rem 0 0; color:var(--text-light); font-size:1.18rem; }
.home-section-head a { color:var(--text-muted); text-decoration:none; font-size:.8rem; }
.home-section-head a:hover { color:var(--primary-color); }
.game-strip { display:flex; gap:.65rem; overflow-x:auto; padding-bottom:.15rem; scrollbar-width:thin; -webkit-overflow-scrolling:touch; }
.game-strip::-webkit-scrollbar { height:5px; }
.game-strip::-webkit-scrollbar-thumb { background:rgba(29,209,161,.32); border-radius:999px; }
.game-chip { flex:0 0 auto; min-width:170px; padding:.72rem .78rem; display:flex; align-items:center; gap:.55rem; border:1px solid rgba(29,209,161,.16); border-radius:12px; background:linear-gradient(180deg,rgba(255,255,255,.018),transparent),rgba(0,0,0,.2); color:var(--text-light); text-decoration:none; transition:var(--transition); }
.game-chip:hover { color:var(--primary-color); border-color:rgba(29,209,161,.36); transform:translateY(-3px); }
.game-chip-icon,.type-icon,.trust-icon { display:inline-flex; align-items:center; justify-content:center; border:1px solid rgba(29,209,161,.18); background:rgba(29,209,161,.1); box-shadow:inset 0 1px 0 rgba(255,255,255,.03); }
.game-chip-icon { width:30px; height:30px; border-radius:9px; font-size:.95rem; }
.game-chip strong { flex:1; color:var(--text-light); font-size:.88rem; }
.game-chip em { color:var(--primary-color); font-size:.8rem; font-style:normal; }
.featured-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:.85rem; }
.featured-card { overflow:hidden; display:flex; flex-direction:column; border:1px solid rgba(29,209,161,.14); border-radius:13px; background:rgba(6,14,15,.94); color:inherit; text-decoration:none; transition:var(--transition); }
.featured-card:hover,.type-card:hover { border-color:rgba(29,209,161,.4); transform:translateY(-4px); }
.featured-image-wrap { position:relative; aspect-ratio:16/9; overflow:hidden; background:rgba(0,0,0,.22); }
.featured-badge { position:absolute; top:.62rem; left:.62rem; z-index:1; width:26px; height:26px; display:inline-flex; align-items:center; justify-content:center; border:1px solid rgba(29,209,161,.24); border-radius:999px; background:rgba(3,10,11,.84); color:var(--primary-color); font-size:.72rem; }
.featured-image-wrap img { width:100%; height:100%; object-fit:cover; transition:var(--transition); }
.featured-card:hover img { transform:scale(1.05); }
.featured-copy { display:flex; flex:1; flex-direction:column; padding:.82rem; }
.featured-copy>span { color:var(--text-muted); font-size:.7rem; text-transform:uppercase; letter-spacing:.06em; }
.featured-copy h3 { margin:.28rem 0 .5rem; color:var(--text-light); font-size:.95rem; line-height:1.28; }
.featured-tags { display:flex; flex-wrap:wrap; gap:.35rem; margin-bottom:.62rem; }
.featured-tags em { padding:.2rem .42rem; border-radius:999px; background:rgba(29,209,161,.1); color:var(--primary-color); font-size:.66rem; font-style:normal; font-weight:700; }
.featured-copy strong { margin-top:auto; color:var(--primary-color); font-size:1.08rem; }
.home-empty-state { padding:1rem; border-radius:12px; background:rgba(0,0,0,.18); color:var(--text-muted); text-align:center; }
.type-grid,.trust-grid { display:grid; gap:.75rem; }
.type-grid { grid-template-columns:repeat(4,minmax(0,1fr)); }
.type-card { min-height:128px; padding:.9rem; display:grid; grid-template-columns:auto 1fr; gap:.72rem; align-items:start; border:1px solid rgba(29,209,161,.14); border-radius:13px; background:linear-gradient(135deg,rgba(29,209,161,.08),transparent 46%),rgba(0,0,0,.18); color:inherit; text-decoration:none; transition:var(--transition); }
.type-icon { width:42px; height:42px; border-radius:12px; font-size:1.15rem; }
.type-copy strong { color:var(--text-light); font-size:1rem; }
.type-card em { grid-column:2; margin-top:auto; color:var(--primary-color); font-size:.74rem; font-style:normal; font-weight:700; }
.type-card p,.trust-grid p { margin:.45rem 0 0; color:var(--text-muted); font-size:.84rem; line-height:1.45; }
.trust-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
.trust-grid article { padding:.9rem; display:grid; grid-template-columns:auto 1fr; column-gap:.68rem; border:1px solid rgba(29,209,161,.12); border-radius:12px; background:rgba(0,0,0,.16); }
.trust-icon { width:34px; height:34px; grid-row:span 2; border-radius:10px; color:var(--primary-color); font-size:.9rem; font-weight:700; }
.trust-grid h3 { margin:0; color:var(--text-light); font-size:.94rem; }
@media (max-width:1024px) { .home-hero { align-items:flex-start; flex-direction:column; } .featured-grid,.type-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:768px) { .home-shell { padding:1rem 1rem 1.8rem; } .home-hero { min-height:0; padding:1rem; } .home-hero-meta { min-width:0; width:100%; } .trust-grid { grid-template-columns:1fr; } }

@media (max-width:768px) {
    .home-hero::after {
        display:none;
    }
}
@media (max-width:560px) { .home-section { padding:.85rem; } .home-section-head { align-items:flex-start; flex-direction:column; gap:.3rem; } .featured-grid,.type-grid { grid-template-columns:1fr; } .game-chip { min-width:156px; } .home-btn { width:100%; } }

@media (max-width:480px) {
    .home-shell,
    .home-panel,
    .home-hero,
    .home-section {
        max-width:100%;
        overflow-x:hidden;
    }

    .home-hero::after {
        display:none;
    }

    .home-hero-copy,
    .home-hero-meta,
    .featured-card,
    .type-card,
    .trust-grid article {
        min-width:0;
    }

    .game-strip {
        max-width:100%;
        overflow-x:auto;
        overflow-y:hidden;
        scrollbar-width:none;
        -webkit-overflow-scrolling:touch;
    }

    .game-strip::-webkit-scrollbar {
        display:none;
    }
}
