/* =========================================================
   SERVOMIX — GAMES PAGE
   File: css/pages/games.css
   Used by: games/. Markup and copy are the originals; this
   file only lays them out. Every value is a token.
========================================================= */

/* ---------------------------------------------------------
   SHARED
--------------------------------------------------------- */

.games-hero-container,
.games-catalog-container,
.games-why-container,
.request-game-container{
    width:min(var(--container), 100% - var(--gutter) * 2);
    margin-inline:auto;
}

.games-hero,
.games-catalog,
.games-why,
.request-game{
    position:relative;
    padding-block:var(--s-7);
}

@media (min-width:1024px){

    .games-hero,
    .games-catalog,
    .games-why,
    .request-game{
        padding-block:var(--s-8);
    }
}

/* decorative layers from the old design are not used */
.games-hero-grid,
.games-hero-glow,
.games-controller-orbit,
.games-controller-glow,
.games-particle,
.games-why-grid,
.games-why-glow,
.request-game-grid,
.request-game-glow,
.request-corner{
    display:none;
}

.games-hero-badge,
.games-catalog-badge,
.games-why-badge,
.request-game-badge{
    display:inline-flex;
    align-items:center;
    gap:var(--s-2);
    min-height:32px;
    padding:0 var(--s-3);
    border:1px solid var(--line);
    border-radius:var(--r-pill);
    background:var(--surface);
    color:var(--accent-strong);
    font-size:var(--t-small);
    font-weight:var(--w-strong);
    letter-spacing:.04em;
}

.games-hero h1 span,
.games-catalog-header h2 span,
.games-why-header h2 span{
    color:var(--accent);
}

.games-catalog-header,
.games-why-header{
    display:grid;
    justify-items:start;
    gap:var(--s-3);
    max-width:720px;
    margin-bottom:var(--s-6);
}

.games-catalog-header h2,
.games-why-header h2,
.request-game-content h2{
    font-size:var(--t-h1);
    line-height:var(--lh-heading);
    font-weight:var(--w-h1);
}

.games-catalog-header p,
.games-why-header p,
.request-game-content p{
    max-width:60ch;
    color:var(--ink-2);
    font-size:var(--t-lead);
}

:where(main[class*="page-"]) small{
    font-size:var(--t-small);
}


/* ---------------------------------------------------------
   HERO
--------------------------------------------------------- */

.games-hero-container{
    display:grid;
    grid-template-columns:minmax(0, 1fr);
    gap:var(--s-7);
    align-items:center;
}

@media (min-width:1024px){

    .games-hero-container{
        grid-template-columns:minmax(0, 1.1fr) minmax(0, .9fr);
        gap:var(--s-8);
    }
}

.games-hero-content{
    display:grid;
    justify-items:start;
    gap:var(--s-4);
    min-width:0;
}

.games-hero h1{
    font-size:min(var(--t-display), 11vw);
    line-height:1;
    font-weight:var(--w-display);
    font-stretch:var(--wd-display);
}

.games-hero h1 span{
    display:block;
}

.games-hero-description{
    max-width:52ch;
    color:var(--ink-2);
    font-size:var(--t-lead);
    line-height:1.55;
}

.games-hero-actions{
    display:flex;
    flex-wrap:wrap;
    gap:var(--s-3);
}

.games-primary-btn,
.games-secondary-btn,
.game-showcase-btn,
.game-showcase-notify,
.request-game-button{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:var(--s-2);
    min-height:var(--btn-h);
    padding:0 var(--btn-pad-x);
    border:1px solid var(--line-strong);
    border-radius:var(--r-pill);
    background:var(--surface);
    color:var(--ink);
    font:inherit;
    font-size:var(--t-small);
    font-weight:var(--w-strong);
    letter-spacing:.02em;
    text-decoration:none;
    cursor:pointer;
    transition:background-color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}

.games-primary-btn,
.request-game-button{
    border-color:transparent;
    background:var(--accent);
    color:var(--ink-on-accent);
}

.games-primary-btn:hover,
.request-game-button:hover{
    background:var(--accent-strong);
    color:var(--ink-on-accent);
}

.games-secondary-btn:hover,
.game-showcase-notify:hover{
    border-color:var(--accent);
    color:var(--accent-strong);
}

:where(.games-primary-btn, .games-secondary-btn, .game-showcase-btn, .game-showcase-notify, .request-game-button):focus-visible{
    outline:none;
    box-shadow:var(--focus-ring);
}

.games-hero-features{
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    gap:var(--s-3) var(--s-5);
    padding-top:var(--s-2);
}

.games-hero-feature{
    display:flex;
    align-items:center;
    gap:var(--s-3);
}

.games-feature-icon{
    display:grid;
    place-items:center;
    width:40px;
    height:40px;
    border-radius:var(--r-control);
    background:var(--accent-soft);
    color:var(--accent-strong);
}

.games-hero-feature strong,
.games-hero-feature span{
    display:block;
    line-height:1.3;
}

.games-hero-feature span{
    color:var(--ink-2);
    font-size:var(--t-small);
}

.games-feature-divider{
    width:1px;
    height:32px;
    background:var(--line);
}

.games-hero-visual{
    position:relative;
    display:grid;
    place-items:center;
    min-height:320px;
    padding:var(--s-6);
    border:1px solid var(--glass-edge);
    border-radius:var(--r-panel);
    background:var(--glass);
    -webkit-backdrop-filter:blur(var(--glass-blur)) saturate(160%);
    backdrop-filter:blur(var(--glass-blur)) saturate(160%);
    box-shadow:var(--shadow-float);
}

.games-controller-image{
    width:min(420px, 100%);
    height:auto;
}

.games-floating-card{
    position:absolute;
    display:flex;
    align-items:center;
    gap:var(--s-3);
    padding:var(--s-3) var(--s-4);
    border:1px solid var(--line);
    border-radius:var(--r-card);
    background:var(--surface);
    box-shadow:var(--shadow-card);
}

.games-performance-card{
    top:var(--s-5);
    left:var(--s-5);
}

.games-latency-card{
    right:var(--s-5);
    bottom:var(--s-5);
}

.games-floating-card span{
    display:block;
    color:var(--ink-2);
    font-size:var(--t-micro);
    font-weight:var(--w-strong);
    letter-spacing:.06em;
}

.games-floating-card strong{
    display:block;
    font-size:var(--t-small);
}

.games-floating-icon{
    display:grid;
    place-items:center;
    width:36px;
    height:36px;
    border-radius:var(--r-control);
    background:var(--accent);
    color:var(--ink-on-accent);
}

.games-latency-dot{
    width:10px;
    height:10px;
    border-radius:50%;
    background:var(--up-fill);
    box-shadow:0 0 0 4px var(--up-soft);
}

@media (max-width:639px){

    .games-hero-visual{
        min-height:0;
        padding:var(--s-4);
        gap:var(--s-3);
    }

    .games-floating-card{
        position:static;
        width:100%;
    }
}

/* game name strip under the hero */
.games-hero-bottom{
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    justify-content:center;
    gap:var(--s-3) var(--s-5);
    width:min(var(--container), 100% - var(--gutter) * 2);
    margin:var(--s-7) auto 0;
    padding-top:var(--s-5);
    border-top:1px solid var(--line);
    color:var(--ink-2);
    font-size:var(--t-small);
    font-weight:var(--w-strong);
    letter-spacing:.12em;
}

.games-hero-bottom > span{
    display:none;
}

.games-hero-bottom i{
    width:5px;
    height:5px;
    border-radius:50%;
    background:var(--line-strong);
}


/* ---------------------------------------------------------
   CATALOG
--------------------------------------------------------- */

.games-catalog{
    scroll-margin-top:var(--nav-h);
}

.games-grid{
    display:grid;
    grid-template-columns:minmax(0, 1fr);
    gap:var(--s-4);
}

@media (min-width:640px){

    .games-grid{
        grid-template-columns:repeat(2, minmax(0, 1fr));
    }
}

@media (min-width:1024px){

    .games-grid{
        grid-template-columns:repeat(4, minmax(0, 1fr));
    }
}

.game-showcase-card{
    position:relative;
    display:grid;
    grid-template-rows:auto 1fr;
    min-height:400px;
    overflow:hidden;
    border:1px solid var(--line);
    border-radius:var(--r-card);
    background:var(--console);
    color:var(--console-ink);
    isolation:isolate;
    transition:transform var(--dur-base) var(--ease), box-shadow var(--dur-base) var(--ease);
}

@media (max-width:639px){

    .game-showcase-card{
        min-height:320px;
    }
}

.game-showcase-card:hover{
    transform:translateY(-3px);
    box-shadow:var(--shadow-float);
}

.game-showcase-bg{
    position:absolute;
    inset:0;
    z-index:-2;
    width:100%;
    height:100%;
    object-fit:cover;
}

.game-showcase-overlay{
    position:absolute;
    inset:0;
    z-index:-1;
    background:linear-gradient(180deg, transparent 0%, var(--console) 62%);
}

.game-showcase-card.coming-soon .game-showcase-bg{
    filter:grayscale(.7);
}

.game-showcase-top{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    padding:var(--s-4);
}

.game-showcase-icon{
    display:grid;
    place-items:center;
    width:48px;
    height:48px;
    padding:var(--s-1);
    border-radius:var(--r-control);
    background:var(--surface);
    box-shadow:var(--shadow-card);
}

.game-showcase-icon img{
    width:100%;
    height:100%;
    object-fit:contain;
    border-radius:calc(var(--r-control) - 4px);
}

.game-showcase-number{
    color:var(--console-ink);
    font-size:var(--t-small);
    font-weight:var(--w-strong);
    font-variant-numeric:tabular-nums;
}

.game-showcase-content{
    display:grid;
    align-content:end;
    gap:var(--s-2);
    padding:var(--s-4);
}

.game-showcase-status{
    display:inline-flex;
    align-items:center;
    gap:var(--s-2);
    width:max-content;
    min-height:24px;
    padding:0 var(--s-2);
    border-radius:var(--r-pill);
    background:var(--surface);
    color:var(--ink);
    font-size:var(--t-micro);
    font-weight:var(--w-strong);
    letter-spacing:.06em;
}

.game-showcase-status span{
    width:7px;
    height:7px;
    border-radius:50%;
    background:var(--up-fill);
}

.game-showcase-content h3{
    color:var(--console-ink);
    font-size:var(--t-h3);
}

.game-showcase-content p{
    color:var(--console-ink-2);
    font-size:var(--t-small);
    line-height:var(--lh-small);
}

.game-showcase-bottom{
    display:flex;
    flex-wrap:wrap;
    align-items:flex-end;
    justify-content:space-between;
    gap:var(--s-3);
    margin-top:var(--s-2);
    padding-top:var(--s-3);
    border-top:1px solid var(--on-accent-tint);
}

.game-showcase-price span{
    display:block;
    color:var(--console-ink-2);
    font-size:var(--t-micro);
    font-weight:var(--w-strong);
    letter-spacing:.06em;
}

.game-showcase-price strong{
    color:var(--console-ink);
    font-size:var(--t-h3);
}

.game-showcase-price small{
    color:var(--console-ink-2);
}

.game-showcase-btn{
    min-height:var(--btn-h-sm);
    padding:0 var(--s-4);
    border-color:transparent;
    background:var(--accent);
    color:var(--ink-on-accent);
}

.game-showcase-btn:hover{
    background:var(--accent-strong);
    color:var(--ink-on-accent);
}

.game-showcase-notify{
    min-height:var(--btn-h-sm);
    padding:0 var(--s-4);
}

.game-showcase-message{
    flex-basis:100%;
    color:var(--console-ink-2);
    font-size:var(--t-small);
}

.game-showcase-message:empty{
    display:none;
}


/* ---------------------------------------------------------
   WHY
--------------------------------------------------------- */

.games-why-grid-cards{
    display:grid;
    grid-template-columns:minmax(0, 1fr);
    gap:var(--s-4);
}

@media (min-width:640px){

    .games-why-grid-cards{
        grid-template-columns:repeat(2, minmax(0, 1fr));
    }
}

@media (min-width:1024px){

    .games-why-grid-cards{
        grid-template-columns:repeat(4, minmax(0, 1fr));
    }
}

.games-why-card{
    position:relative;
    display:grid;
    grid-template-rows:auto 1fr auto;
    gap:var(--s-4);
    padding:var(--card-pad);
    border:1px solid var(--line);
    border-radius:var(--r-card);
    background:var(--surface);
}

.games-why-number{
    position:absolute;
    top:var(--card-pad);
    right:var(--card-pad);
    color:var(--ink-3);
    font-size:var(--t-small);
    font-weight:var(--w-strong);
    font-variant-numeric:tabular-nums;
}

.games-why-icon{
    display:grid;
    place-items:center;
    width:48px;
    height:48px;
    border-radius:var(--r-control);
    background:var(--accent-soft);
    color:var(--accent-strong);
}

.games-why-icon .icon{
    width:var(--icon);
    height:var(--icon);
}

.games-why-card-content{
    display:grid;
    align-content:start;
    gap:var(--s-2);
}

.games-why-label{
    color:var(--accent-strong);
    font-size:var(--t-micro);
    font-weight:var(--w-strong);
    letter-spacing:.08em;
}

.games-why-card h3{
    font-size:var(--t-h3);
}

.games-why-card p{
    color:var(--ink-2);
    font-size:var(--t-small);
    line-height:var(--lh-small);
}

.games-why-card-bottom{
    display:flex;
    align-items:center;
    gap:var(--s-2);
    padding-top:var(--s-3);
    border-top:1px solid var(--line);
    color:var(--ink-2);
    font-size:var(--t-micro);
    letter-spacing:.06em;
}

.games-why-card-bottom span{
    width:7px;
    height:7px;
    border-radius:50%;
    background:var(--up-fill);
}


/* ---------------------------------------------------------
   REQUEST A GAME
--------------------------------------------------------- */

.request-game-container{
    position:relative;
    display:grid;
    grid-template-columns:minmax(0, 1fr);
    gap:var(--s-6);
    align-items:center;
    padding:var(--card-pad-lg);
    overflow:hidden;
    border-radius:var(--r-panel);
    background:var(--console);
    color:var(--console-ink);
}

@media (min-width:1024px){

    .request-game-container{
        grid-template-columns:minmax(0, 1fr) minmax(0, 1fr);
        gap:var(--s-8);
        padding:var(--s-8);
    }
}

.request-game-controller{
    position:absolute;
    right:var(--s-5);
    top:var(--s-5);
    color:var(--console-ink-2);
    opacity:.35;
}

.request-game-controller .icon{
    width:56px;
    height:56px;
}

.request-game-content{
    display:grid;
    justify-items:start;
    gap:var(--s-4);
}

.request-game-badge{
    border-color:transparent;
    background:var(--on-accent-tint);
    color:var(--console-ink);
}

.request-game-badge-dot{
    width:8px;
    height:8px;
    border-radius:50%;
    background:var(--up-fill);
}

.request-game-content h2{
    color:var(--console-ink);
}

.request-game-content p{
    color:var(--console-ink-2);
}

.request-game-note{
    display:flex;
    align-items:center;
    gap:var(--s-2);
    color:var(--console-ink-2);
    font-size:var(--t-small);
}

.request-game-form-wrap{
    display:grid;
    gap:var(--s-4);
    padding:var(--s-5);
    border-radius:var(--r-card);
    background:var(--surface);
    color:var(--ink);
}

.request-game-form{
    display:grid;
    gap:var(--s-2);
}

.request-game-form label{
    color:var(--ink-2);
    font-size:var(--t-micro);
    font-weight:var(--w-strong);
    letter-spacing:.08em;
}

.request-game-input-wrap{
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    gap:var(--s-2);
    padding:var(--s-1);
    border:1px solid var(--line-control);
    border-radius:var(--r-pill);
    background:var(--surface);
}

.request-game-input-wrap:focus-within{
    border-color:var(--accent);
    box-shadow:var(--focus-ring);
}

.request-game-input-icon{
    display:grid;
    place-items:center;
    width:36px;
    color:var(--ink-3);
}

.request-game-input-wrap input{
    flex:1 1 160px;
    min-width:0;
    min-height:var(--btn-h-sm);
    border:0;
    background:transparent;
    color:var(--ink);
    font:inherit;
    outline:none;
}

.request-game-button.is-submitted{
    background:var(--up);
}

@media (max-width:479px){

    .request-game-input-wrap{
        border-radius:var(--r-card);
    }

    .request-game-button{
        flex-basis:100%;
    }
}

.request-game-status{
    min-height:1.5em;
    color:var(--up);
    font-size:var(--t-small);
    opacity:0;
    transition:opacity var(--dur-fast) var(--ease);
}

.request-game-status.show{
    opacity:1;
}

.request-game-status.error{
    color:var(--down);
}

.request-game-meta{
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    gap:var(--s-2) var(--s-4);
    color:var(--ink-2);
    font-size:var(--t-small);
}

.request-game-meta-item{
    display:flex;
    align-items:center;
    gap:var(--s-2);
}

.request-meta-icon{
    display:grid;
    place-items:center;
    color:var(--up);
}

.request-meta-divider{
    width:1px;
    height:16px;
    background:var(--line);
}