:root {
    --af-bg-1:#070a1a;
    --af-bg-2:#12163a;
    --af-neon-cyan:#39d0ff;
    --af-neon-pink:#ff3bb8;
    --af-neon-yellow:#ffe156;
    --af-card:#121631;
    --af-card-border:#27306b;
    --af-text:#e9ecf2;
}

*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}

body {
    font-family: Inter, system-ui, sans-serif;
    color:var(--af-text);
    background: radial-gradient(80% 60% at 50% 0%, rgba(255,59,184,.08), transparent 60%),
    radial-gradient(60% 50% at 0% 100%, rgba(57,208,255,.08), transparent 60%),
    linear-gradient(135deg, var(--af-bg-1) 0%, var(--af-bg-2) 100%);
    overflow-x:hidden;
}

/* FX layers */
.af-layer {position:fixed;inset:0;pointer-events:none}
#af-stars{z-index:0}
.af-neon-gradient {
    z-index:1;
    filter:blur(40px);
    opacity:.65;
    background:conic-gradient(from 0deg at 70% 20%,
    rgba(57,208,255,.35), rgba(255,59,184,.35),
    rgba(255,225,86,.25), rgba(57,208,255,.35));
    mix-blend-mode:screen;
}
.af-scanlines {
    z-index:2;
    background: repeating-linear-gradient(0deg, rgba(255,255,255,.03) 0 2px, transparent 3px 6px)
}

.arcade-container {
    position:relative;
    z-index:3;
    max-width:1200px;
    margin:auto;
    padding:48px 20px;
    text-align:center;
}

/* Header */
.arcade-header {margin-bottom:56px;}
.arcade-header h1 {
    font-family:"Press Start 2P", monospace;
    font-size:clamp(28px, 4vw, 48px);
    background:linear-gradient(90deg, var(--af-neon-cyan), var(--af-neon-pink), var(--af-neon-yellow));
    -webkit-background-clip:text;
    background-clip:text;
    color:transparent;
    text-shadow:0 0 18px rgba(57,208,255,.35), 0 0 28px rgba(255,59,184,.25);
}
.af-blink{animation:blink .9s steps(2,end) infinite;margin-right:.4ch}
@keyframes blink{50%{opacity:0}}
.arcade-header p {opacity:.9;margin-top:12px;font-size:clamp(14px,2.2vw,18px)}

/* Grid */
.games-grid {
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
    gap:28px;
    text-align:left;
}

/* Cards */
.game-card {
    position:relative;
    overflow:hidden;
    cursor:pointer;
    background: linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,.01)), var(--af-card);
    border:1px solid var(--af-card-border);
    border-radius:18px;
    padding:28px;
    transition: transform .35s ease, box-shadow .35s ease, border-color .35s ease;
}
.game-card::after {
    content:"";
    position:absolute;
    inset:-1px;
    border-radius:inherit;
    z-index:-1;
    background:linear-gradient(120deg, var(--af-neon-cyan), var(--af-neon-pink), var(--af-neon-yellow));
    filter:blur(18px);
    opacity:.15;
    transition:opacity .35s ease;
}
.game-card__shine {
    position:absolute;
    inset:0;
    background:linear-gradient(120deg,transparent 30%,rgba(255,255,255,.06) 50%,transparent 70%);
    transform:translateX(-120%);
    transition:transform .8s ease;
    pointer-events:none;
}
.game-card:hover {
    transform:translateY(-8px);
    border-color:var(--af-neon-cyan);
    box-shadow:0 28px 80px rgba(57,208,255,.18);
}
.game-card:hover::after {opacity:.35}
.game-card:hover .game-card__shine {transform:translateX(120%)}

.game-icon {
    font-size:64px;
    margin-bottom:10px;
    filter:drop-shadow(0 8px 22px rgba(57,208,255,.35));
    animation:float 3s ease-in-out infinite;
}
@keyframes float {0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}

.game-card h2 {font-size:22px;color:var(--af-neon-cyan);margin:6px 0 8px;font-weight:800}
.game-card p {opacity:.9;line-height:1.6;font-size:15px;margin-bottom:16px}
.game-stats {
    display:flex;
    justify-content:space-between;
    align-items:center;
    background:rgba(0,0,0,.25);
    border:1px solid rgba(255,255,255,.06);
    border-radius:12px;
    padding:10px 12px;
    margin:12px 0 18px;
}
.game-stats i {color:var(--af-neon-cyan);margin-right:6px}

.play-btn {
    width:100%;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:10px;
    padding:14px 18px;
    border:0;
    border-radius:12px;
    font-weight:800;
    background:linear-gradient(90deg,var(--af-neon-cyan),var(--af-neon-pink));
    color:#06121c;
    text-shadow:0 1px 0 rgba(255,255,255,.35);
    box-shadow:0 10px 28px rgba(57,208,255,.35),inset 0 -2px 0 rgba(0,0,0,.25);
    transition:transform .15s ease, box-shadow .2s ease;
}
.play-btn:hover {
    transform:translateY(-2px);
    box-shadow:0 14px 36px rgba(255,59,184,.35), inset 0 -2px 0 rgba(0,0,0,.25);
}
.play-btn:active {transform:translateY(0) scale(.98)}

.arcade-footer {
    text-align:center;
    opacity:.7;
    font-size:13px;
    padding:28px 0;
    margin-top:18px;
}

@media(max-width:480px){
    .game-icon{font-size:52px}
    .game-card{padding:22px}
}

/* --- Badge diagonal "BÊTA" --- */
.game-card[data-badge] {
    /* pour gérer la superposition du ruban au-dessus du shine */
    isolation:isolate;
}

/* Le ruban principal */
.game-card[data-badge]::before {
    content: attr(data-badge);
    position: absolute;
    z-index: 4;
    top: -26px;
    left: 257px;
    width: 174px;
    text-align: center;
    padding: 8px 0;
    font: 800 12px/1 Inter, system-ui, sans-serif;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: #000;
    background: linear-gradient(90deg, var(--af-neon-cyan), var(--af-neon-pink), var(--af-neon-yellow));
    border: 1px solid rgba(255,255,255,.28);
    border-radius: 10px;
    box-shadow: 0 8px 26px rgba(57,208,255,.30), 0 0 0 1px rgba(0,0,0,.25) inset;
    transform: rotate(36deg);
    transform-origin: left top;
    pointer-events: none;
    text-shadow: 0 1px 0 rgba(255,255,255,.5);
}

/* petite lueur dynamique au survol de la carte */
.game-card:hover[data-badge]::before{
    box-shadow:
            0 12px 40px rgba(255,59,184,.35),
            0 0 0 1px rgba(0,0,0,.25) inset;
    filter: saturate(1.05) brightness(1.05);
}

/* Variante "bande complète" qui traverse davantage la carte (optionnelle)
   -> applique .is-beta--wide en plus de data-badge si tu veux un ruban plus long */
.game-card.is-beta--wide[data-badge]::before{
    width: 280px;
    left: -60px;
    top: 10px;
    transform: rotate(-32deg);
}

/* Accessibilité visuelle: badge discret pour très petits écrans */
@media (max-width: 480px){
    .game-card[data-badge]::before{
        font-size: 10px;
        width: 190px;
        left: -44px;
        top: 14px;
    }
}

.game-media {
    position: relative;
    width: 100%;
    aspect-ratio: 16/9;
    border-radius: 14px;
    margin-bottom: 16px;
    overflow: hidden;
    background:
            radial-gradient(60% 80% at 20% 20%, rgba(57,208,255,.15), transparent 60%),
            radial-gradient(60% 80% at 80% 80%, rgba(255,59,184,.12), transparent 60%),
            rgba(255,255,255,.02);
    border: 1px solid rgba(255,255,255,.08);
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.03);
}

.game-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    filter: contrast(1.05) saturate(1.05);
    transition: transform .35s ease;
}

.game-card:hover .game-media img {
    transform: scale(1.03);
}