:root{
    /* 259 — Cyberpunk Miles Morales (Violet / Rouge néon) */
    --bg0:#060010;
    --bg1:#0b0218;
    --bg2:#04000c;
    --panel:#140326;
    --panel2:#1b0433;
    --text:#f6f0ff;
    --muted:#cbb6ff;
    --line:rgba(255,255,255,.10);

    /* Palette principale */
    --violet:#7b2cff;
    --violet2:#b388ff;
    --red:#ff2a4d;
    --red2:#ff6a85;

    /* Remplacements legacy */
    --blue:#9d4edd;
    --blue2:#c77dff;
    --yellow:#ff2a4d;
    --yellow2:#ff6a85;

    --ok:#4dffdf;
    --danger:#ff4d6d;

    --shadow: 0 24px 80px rgba(0,0,0,.62);
    --shadow2: 0 14px 42px rgba(0,0,0,.42);
    --radius: 18px;
    --radius2: 26px;
    --max: 1120px;
    --ease: cubic-bezier(.2,.8,.2,1);

    /* HUD angles */
    --cut: 14px;
    --cut2: 22px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
    margin:0;
    font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
    color:var(--text);
    background:
    radial-gradient(1000px 540px at 12% 10%, rgba(42,168,255,.32), transparent 60%),
    radial-gradient(900px 520px at 86% 16%, rgba(255,216,74,.24), transparent 60%),
    radial-gradient(900px 600px at 50% 110%, rgba(111,211,255,.14), transparent 60%),
    linear-gradient(180deg, var(--bg0) 0%, var(--bg1) 45%, var(--bg2) 100%);
    overflow-x:hidden;
}

a{color:inherit; text-decoration:none}
button, input, select, textarea{font:inherit}

/* Background: grid + scanlines + noise + glow orbs */
.bg-grid{
    position:fixed; inset:0; pointer-events:none; opacity:.22;
    background:
    linear-gradient(to right, rgba(255,255,255,.06) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,.06) 1px, transparent 1px);
    background-size: 56px 56px;
    mask-image: radial-gradient(closest-side at 50% 22%, black 40%, transparent 90%);
    z-index:-4;
}
.bg-scan{
    position:fixed; inset:0; pointer-events:none; z-index:-3; opacity:.18;
    background: repeating-linear-gradient(
    180deg,
    rgba(255,255,255,.06) 0,
    rgba(255,255,255,.06) 1px,
    transparent 2px,
    transparent 7px
    );
    mix-blend-mode: overlay;
    mask-image: radial-gradient(closest-side at 50% 25%, black 35%, transparent 85%);
}
.bg-noise{
    position:fixed; inset:0; pointer-events:none; opacity:.08; mix-blend-mode:overlay; z-index:-2;
    background-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="200" height="200"><filter id="n"><feTurbulence type="fractalNoise" baseFrequency=".8" numOctaves="3" stitchTiles="stitch"/></filter><rect width="200" height="200" filter="url(%23n)" opacity=".35"/></svg>');
    background-size:200px 200px;
}
.orb{
    position:fixed;
    width:520px; height:520px;
    border-radius:999px;
    filter: blur(46px);
    opacity:.20;
    pointer-events:none;
    z-index:-1;
}
.orb.one{left:-180px; top:120px; background: radial-gradient(circle at 30% 30%, rgba(255,216,74,.8), rgba(42,168,255,.1) 60%, transparent 70%)}
.orb.two{right:-220px; top:-80px; background: radial-gradient(circle at 30% 30%, rgba(111,211,255,.7), rgba(255,216,74,.12) 60%, transparent 72%)}

/* Layout */
.container{max-width:var(--max); margin:0 auto; padding:0 18px}
.section{padding: 96px 0}
.section.sm{padding: 74px 0}

/* HUD panels */
.hud{
    position:relative;
    border:1px solid rgba(42,168,255,.35);
    background: linear-gradient(180deg, rgba(15,34,74,.65), rgba(6,12,28,.85));
    box-shadow: 0 0 40px rgba(42,168,255,.12), var(--shadow2);
    clip-path: polygon(
    var(--cut) 0,
    calc(100% - var(--cut)) 0,
    100% var(--cut),
    100% calc(100% - var(--cut)),
    calc(100% - var(--cut)) 100%,
    var(--cut) 100%,
    0 calc(100% - var(--cut)),
    0 var(--cut)
    );
    overflow:hidden;
}
.hud:before{
    content:"";
    position:absolute; inset:-2px;
    background: linear-gradient(110deg, rgba(42,168,255,.55), rgba(255,216,74,.35), rgba(111,211,255,.22));
    filter: blur(18px);
    opacity:.16;
    pointer-events:none;
}
.hud:after{
    content:"";
    position:absolute; inset:0;
    background:
    radial-gradient(900px 360px at 30% 0%, rgba(42,168,255,.12), transparent 60%),
    radial-gradient(900px 360px at 70% 0%, rgba(255,216,74,.10), transparent 60%);
    opacity:.9;
    pointer-events:none;
}

/* Nav */
.nav-wrap{
    position: sticky;
    top: 0;
    z-index: 50;
    backdrop-filter: blur(14px);
    background: rgba(7,0,17,.58);
    border-bottom: 1px solid rgba(255,255,255,.10);
}

.nav{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 18px 0;
    min-height: 88px;
    flex-wrap: wrap;
}

.brand{
    display: flex;
    align-items: center;
    gap: 14px;
    flex: 0 1 auto;
    min-width: 0;
}

.logo{
    width: 52px;
    height: 52px;
    object-fit: contain;
    border-radius: 14px;
    border: 1px solid rgba(255,255,255,.18);
    background: rgba(0,0,0,.25);
    padding: 5px;
    box-shadow: 0 0 18px rgba(255,216,74,.26), 0 0 26px rgba(42,168,255,.22);
}

.brand h1{
    font-family: "Space Grotesk", Inter, system-ui;
    font-size: 18px;
    line-height: 1.1;
    margin: 0;
    letter-spacing: .5px;
}

.brand small{
    display: block;
    color: var(--muted);
    font-weight: 800;
    margin-top: 3px;
    letter-spacing: .2px;
    font-size: 13px;
}

.nav-links{
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    flex: 1 1 420px;
    flex-wrap: wrap;
    min-width: 0;
}

.nav-links a{
    padding: 10px 14px;
    border-radius: 12px;
    color: rgba(243,240,255,.92);
    border: 1px solid transparent;
    transition: all .22s var(--ease);
    font-weight: 900;
    font-size: 12px;
    letter-spacing: .55px;
    text-transform: uppercase;
    white-space: nowrap;
}

.nav-links a:hover{
    border-color: rgba(255,255,255,.16);
    background: rgba(255,255,255,.05);
    transform: translateY(-1px);
}

.nav-actions{
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 0 0 auto;
}

/* Controller-like action buttons */
.btn{
    position:relative;
    display:inline-flex; align-items:center; justify-content:center;
    gap:10px;
    padding: 12px 16px;
    border-radius: 14px;
    border: 1px solid rgba(255,255,255,.14);
    background: rgba(255,255,255,.04);
    color: var(--text);
    font-weight:900;
    letter-spacing:.8px;
    text-transform:uppercase;
    transition: transform .18s var(--ease), border-color .18s var(--ease), background .18s var(--ease), box-shadow .18s var(--ease);
    cursor:pointer;
    box-shadow: 0 7px 0 rgba(0,0,0,.60), 0 14px 34px rgba(0,0,0,.25);
    user-select:none;
    isolation:isolate;
}
.btn:before{
    content:"";
    position:absolute;
    inset:-1px;
    border-radius: 14px;
    background: linear-gradient(120deg, rgba(42,168,255,.0), rgba(42,168,255,.30), rgba(255,216,74,.22), rgba(111,211,255,.16));
    opacity:.0;
    transition: opacity .18s var(--ease);
    z-index:-1;
}
.btn:hover{transform: translateY(-1px); border-color: rgba(255,255,255,.22); background: rgba(255,255,255,.06)}
.btn:hover:before{opacity:.95}
.btn:active{transform: translateY(4px); box-shadow: 0 2px 0 rgba(0,0,0,.60)}

.btn.primary{
    border: 1px solid rgba(255,216,74,.85);
    background:
    radial-gradient(120% 160% at 20% 0%, rgba(255,216,74,.55), transparent 55%),
    radial-gradient(140% 200% at 70% 20%, rgba(42,168,255,.35), transparent 62%),
    linear-gradient(180deg, rgba(30,18,70,.85), rgba(10,8,26,.95));
    box-shadow: 0 8px 0 rgba(0,0,0,.70), 0 0 50px rgba(255,216,74,.35);
}
.btn.primary:hover{border-color: rgba(255,216,74,.78); box-shadow: 0 7px 0 rgba(0,0,0,.60), 0 0 46px rgba(255,216,74,.22)}

.btn.alt{
    border: 1px solid rgba(42,168,255,.55);
    background:
    radial-gradient(110% 140% at 20% 0%, rgba(42,168,255,.30), transparent 55%),
    linear-gradient(180deg, rgba(18,10,48,.72), rgba(8,6,22,.72));
    box-shadow: 0 7px 0 rgba(0,0,0,.60), 0 0 30px rgba(42,168,255,.14);
}

.btn.ghost{border-color: rgba(255,255,255,.16); background: rgba(255,255,255,.03)}

/* Nintendo-ish action capsules */
.padkey{
    display:inline-flex; align-items:center; gap:8px;
    font-size:11px;
    font-weight:1000;
    letter-spacing:.55px;
    color: rgba(243,240,255,.92);
    padding: 6px 10px;
    border-radius: 999px;
    border:1px solid rgba(255,255,255,.16);
    background: rgba(0,0,0,.22);
    box-shadow: inset 0 0 0 1px rgba(0,0,0,.35);
    text-transform:none;
}
.btn .abxy{display:inline-flex; gap:6px; align-items:center}
.kbtn{
    width:22px; height:22px; border-radius:999px;
    display:grid; place-items:center;
    border:1px solid rgba(255,255,255,.14);
    box-shadow: inset 0 -2px 0 rgba(0,0,0,.45), 0 0 16px rgba(255,255,255,.06);
    font-weight:1000;
    font-size:11px;
}
.kbtn.a{background: radial-gradient(circle at 30% 30%, rgba(111,211,255,.85), rgba(111,211,255,.22));}
.kbtn.b{background: radial-gradient(circle at 30% 30%, rgba(255,216,74,.85), rgba(255,216,74,.22));}
.kbtn.x{background: radial-gradient(circle at 30% 30%, rgba(42,168,255,.85), rgba(42,168,255,.22));}
.kbtn.y{background: radial-gradient(circle at 30% 30%, rgba(183,255,74,.85), rgba(183,255,74,.18)); color:#100d1a}

.pill{
    display:inline-flex; align-items:center; gap:10px;
    padding:8px 12px;
    border-radius: 999px;
    border:1px solid rgba(255,255,255,.12);
    background: rgba(255,255,255,.04);
    color: rgba(243,240,255,.90);
    font-weight:1000;
    font-size:12px;
    letter-spacing:.35px;
    text-transform:uppercase;
}
.dot{
    width:10px; height:10px; border-radius:999px;
    background: radial-gradient(circle at 30% 30%, var(--yellow), var(--blue));
    box-shadow: 0 0 18px rgba(255,216,74,.22);
}

/* Hero */
.hero{padding: 72px 0 30px; position:relative}
.hero-grid{display:grid; grid-template-columns: 1.25fr .9fr; gap: 18px; align-items:stretch}
.hero-left{padding: 26px; position:relative; z-index:1}

.hero-title{
    font-family: "Space Grotesk", Inter, system-ui;
    font-size: 56px;
    line-height: 1.00;
    letter-spacing: -1.2px;
    margin: 14px 0 12px;
}
.hero-title .accent{
    background: linear-gradient(90deg, var(--yellow2), var(--blue2), var(--yellow));
    -webkit-background-clip:text;
    background-clip:text;
    color: transparent;
    text-shadow: 0 0 32px rgba(255,216,74,.25), 0 0 42px rgba(42,168,255,.18);
}
.hero-sub{color: rgba(243,240,255,.82); font-size: 16px; line-height:1.75; margin: 0 0 18px; max-width: 62ch;}

.cta-row{display:flex; flex-wrap:wrap; gap:10px; margin-top: 14px}

.hero-stats{display:grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 18px;}
.stat{
    padding: 12px 12px;
    border:1px solid rgba(255,255,255,.10);
    background: rgba(8,6,22,.55);
    clip-path: polygon(12px 0, calc(100% - 12px) 0, 100% 12px, 100% calc(100% - 12px), calc(100% - 12px) 100%, 12px 100%, 0 calc(100% - 12px), 0 12px);
}
.stat b{display:block; font-family:"Space Grotesk"; font-size: 18px; letter-spacing:.2px}
.stat span{color: var(--muted); font-weight:900; font-size:12px; letter-spacing:.2px}

/* Right arena visual */
.arena-wrap{padding: 16px; position:relative}
.arena-top{display:flex; justify-content:space-between; align-items:center; gap:12px; margin-bottom: 12px}
.arena-title{font-family:"Space Grotesk"; font-weight:1000; letter-spacing:.4px; text-transform:uppercase; font-size:12px; color: rgba(243,240,255,.92)}
.badge{
    display:inline-flex; align-items:center; gap:8px;
    padding: 8px 12px;
    border-radius: 999px;
    border: 1px solid rgba(255,255,255,.14);
    background: rgba(255,255,255,.04);
    font-weight:1000;
    font-size:12px;
}
.chip{
    width:10px; height:10px; border-radius:999px;
    background: var(--ok);
    box-shadow: 0 0 14px rgba(86,255,211,.35);
}

.arena{
    position:relative;
    height: 336px;
    border:1px solid rgba(255,216,74,.45);
    background:
    radial-gradient(1000px 420px at 20% 10%, rgba(255,216,74,.30), transparent 60%),
    radial-gradient(900px 420px at 80% 20%, rgba(42,168,255,.28), transparent 60%),
    linear-gradient(180deg, rgba(10,18,40,.95), rgba(4,8,18,.95));
    clip-path: polygon(var(--cut2) 0, calc(100% - var(--cut2)) 0, 100% var(--cut2), 100% calc(100% - var(--cut2)), calc(100% - var(--cut2)) 100%, var(--cut2) 100%, 0 calc(100% - var(--cut2)), 0 var(--cut2));
    overflow:hidden;
    box-shadow: 0 0 60px rgba(255,216,74,.18), 0 0 80px rgba(42,168,255,.12);
    animation: arenaPulse 4s ease-in-out infinite alternate;
}

@keyframes arenaPulse {
    from {
    box-shadow: 0 0 40px rgba(255,216,74,.12), 0 0 60px rgba(42,168,255,.10);
    }
    to {
    box-shadow: 0 0 80px rgba(255,216,74,.28), 0 0 120px rgba(42,168,255,.18);
    }
}
.arena:before{
    content:"";
    position:absolute; inset:-2px;
    background: linear-gradient(120deg, rgba(255,216,74,.55), rgba(42,168,255,.32), rgba(111,211,255,.16));
    filter: blur(20px);
    opacity:.20;
    z-index:0;
}
.arena:after{
    content:"";
    position:absolute; inset:0;
    background: repeating-linear-gradient(135deg, rgba(255,255,255,.08) 0 2px, transparent 2px 12px);
    opacity:.10;
    z-index:0;
}

.rig{position:absolute; inset:0; z-index:1; padding: 16px; display:grid; grid-template-columns: 1fr 1fr; gap: 12px; align-content:stretch;}
.rig .panel{
    border:1px solid rgba(255,255,255,.12);
    background: rgba(7,0,17,.62);
    clip-path: polygon(14px 0, calc(100% - 14px) 0, 100% 14px, 100% calc(100% - 14px), calc(100% - 14px) 100%, 14px 100%, 0 calc(100% - 14px), 0 14px);
    position:relative;
    overflow:hidden;
}
.rig .panel:after{
    content:"";
    position:absolute; left:-25%; top:-50%; width:150%; height:220%;
    background: linear-gradient(120deg, transparent 30%, rgba(255,216,74,.22), rgba(42,168,255,.16), transparent 70%);
    transform: rotate(12deg);
    opacity:.9;
}
.rig .panel .label{
    position:absolute; left:14px; top:12px;
    font-family:"Space Grotesk";
    font-weight:1000;
    font-size:11px;
    color: #fff;

    background: rgba(0, 0, 0, 0.55); 
    padding: 6px 10px;
    border-radius: 8px;

    letter-spacing:.55px;
    text-transform:uppercase;
    text-shadow: 0 2px 6px rgba(0,0,0,0.8);
}

.panel.pc{
  background: url("images/pc-bang.png") center/cover no-repeat;
}

.panel.console{
  background: url("images/xbox.png") center/cover no-repeat;
}

.panel.tournoi{
  background: url("images/tournament.png") center/cover no-repeat;
}

.bar:nth-child(2){height:66%; background: linear-gradient(180deg, rgba(111,211,255,.60), rgba(255,216,74,.18))}
.bar:nth-child(3){height:84%}
.bar:nth-child(4){height:58%}
.bar:nth-child(5){height:72%; background: linear-gradient(180deg, rgba(183,255,74,.55), rgba(111,211,255,.18));}

.mini-grid{display:grid; grid-template-columns: 1fr 1fr; gap:10px; margin-top: 12px}
.mini{
    border:1px solid rgba(255,255,255,.12);
    background: rgba(8,6,22,.55);
    clip-path: polygon(12px 0, calc(100% - 12px) 0, 100% 12px, 100% calc(100% - 12px), calc(100% - 12px) 100%, 12px 100%, 0 calc(100% - 12px), 0 12px);
    padding: 12px;
    display:flex;
    align-items:flex-start;
    gap: 10px;
}
.mini .icon{
    width:36px; height:36px;
    display:grid; place-items:center;
    border-radius: 14px;
    border:1px solid rgba(255,255,255,.14);
    background: rgba(255,255,255,.04);
    box-shadow: inset 0 0 0 1px rgba(0,0,0,.35);
    flex:0 0 auto;
}
.mini b{display:block; font-size:13px; margin-bottom:2px; font-weight:1000; letter-spacing:.25px}
.mini span{color:var(--muted); font-weight:900; font-size:12px; line-height:1.3}

/* Section headings */
.kicker{
    display:flex; align-items:center; gap:10px;
    color: rgba(243,240,255,.90);
    font-weight:1000;
    font-size:12px;
    letter-spacing:.55px;
    text-transform:uppercase;
    margin-bottom: 10px;
}
.kicker .line{
    height:1px; flex:1;
    background: linear-gradient(90deg, rgba(255,216,74,.70), rgba(42,168,255,.55), rgba(111,211,255,.35), transparent);
    opacity:.75;
}

h3.section-title{font-family:"Space Grotesk"; font-size: 34px; letter-spacing:-.5px; margin: 0 0 10px;}
.sub{color: rgba(243,240,255,.76); margin: 0 0 24px; line-height: 1.75;}

/* Cards + grids */
.grid{display:grid; gap: 14px}
.grid.cols-3{grid-template-columns: repeat(3, 1fr)}
.grid.cols-2{grid-template-columns: repeat(2, 1fr)}

.card{
    position:relative;
    border:1px solid rgba(255,255,255,.12);
    background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
    box-shadow: var(--shadow2);
    clip-path: polygon(var(--cut) 0, calc(100% - var(--cut)) 0, 100% var(--cut), 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, var(--cut) 100%, 0 calc(100% - var(--cut)), 0 var(--cut));
    overflow:hidden;
}
.card:before{
    content:"";
    position:absolute; inset:-1px;
    background: linear-gradient(120deg, rgba(255,216,74,.30), rgba(42,168,255,.22), rgba(111,211,255,.12));
    opacity:.12;
    filter: blur(18px);
    pointer-events:none;
}
.card .pad{padding: 18px; position:relative; z-index:1}
.card h4{margin:0 0 8px; font-family:"Space Grotesk"; font-size: 18px; letter-spacing:-.2px;}
.card p{margin:0; color: rgba(243,240,255,.76); line-height:1.6; font-size:14px}

.list{margin: 12px 0 0; padding: 0; list-style:none; display:grid; gap: 8px}
.list li{display:flex; gap:10px; align-items:flex-start; color: rgba(243,240,255,.82); font-weight:850; font-size: 13px; line-height:1.35}
.tick{
    width:18px; height:18px; border-radius:6px;
    border:1px solid rgba(255,255,255,.14);
    display:grid; place-items:center;
    background: rgba(255,255,255,.04);
    flex:0 0 auto; margin-top:1px
}

/* Events */
.event{display:flex; flex-direction:column; height:100%}
.event-top{
    padding: 16px 18px;
    border-bottom: 1px solid rgba(255,255,255,.10);
    background: rgba(7,0,17,.44);
    display:flex; justify-content:space-between; align-items:center; gap:12px;
}
.event-top b{font-family:"Space Grotesk"; font-size: 16px; letter-spacing:.2px}
.tag{
    padding: 6px 10px;
    border-radius:999px;
    border:1px solid rgba(255,255,255,.14);
    background: rgba(255,255,255,.04);
    font-weight:1000;
    font-size:11px;
    letter-spacing:.4px;
    color: rgba(243,240,255,.90);
    white-space:nowrap;
    text-transform:uppercase;
}
.tag.pink{border-color: rgba(255,216,74,.60)}
.tag.violet{border-color: rgba(42,168,255,.60)}
.tag.cyan{border-color: rgba(111,211,255,.55)}

.event .pad{padding: 16px 18px; display:grid; gap:10px; position:relative; z-index:1}
.meta{display:flex; flex-wrap:wrap; gap:8px; color:var(--muted); font-weight:1000; font-size:12px}
.meta span{display:inline-flex; gap:6px; align-items:center; padding: 6px 10px; border-radius: 999px; border:1px solid rgba(255,255,255,.10); background: rgba(8,6,22,.55)}
.meta i{font-style:normal; color: rgba(243,240,255,.92)}

.event .actions{margin-top:auto; padding: 0 18px 18px; position:relative; z-index:1}
.event .actions .btn{width:100%}

/* Pricing */
.price{display:flex; flex-direction:column; height:100%}
.price .head{padding: 18px; border-bottom:1px solid rgba(255,255,255,.10); background: rgba(7,0,17,.42); position:relative; z-index:1}
.price .head b{font-family:"Space Grotesk"; font-size: 18px}
.price .amount{font-family:"Space Grotesk"; font-size: 34px; letter-spacing:-.8px; margin-top:10px}
.price .amount small{font-size: 14px; color: var(--muted); font-weight:1000}
.price .pad{padding: 16px 18px; display:grid; gap:10px; position:relative; z-index:1}
.price .actions{margin-top:auto; padding: 0 18px 18px; position:relative; z-index:1}

/* Gallery */
.gallery{display:grid; grid-template-columns: 1.2fr .8fr; gap: 14px}
.shot, .big{
    position:relative;
    border:1px solid rgba(255,255,255,.12);
    background:
    radial-gradient(1200px 420px at 30% 20%, rgba(255,216,74,.18), transparent 60%),
    radial-gradient(900px 520px at 70% 30%, rgba(42,168,255,.14), transparent 60%),
    radial-gradient(900px 520px at 70% 90%, rgba(111,211,255,.10), transparent 60%),
    linear-gradient(180deg, rgba(18,10,48,.70), rgba(8,6,22,.70));
    clip-path: polygon(var(--cut2) 0, calc(100% - var(--cut2)) 0, 100% var(--cut2), 100% calc(100% - var(--cut2)), calc(100% - var(--cut2)) 100%, var(--cut2) 100%, 0 calc(100% - var(--cut2)), 0 var(--cut2));
    overflow:hidden;
    box-shadow: var(--shadow2);
}
.big{min-height: 360px}
.shot{min-height: 170px}

.big:after, .shot:after{
    content:"";
    position:absolute; inset:-40px;
    background: repeating-linear-gradient(135deg, rgba(255,255,255,.08) 0 2px, transparent 2px 12px);
    opacity:.12;
    transform: rotate(6deg);
}

.img-floor { 
  background-image: url('images/gaming_floor.png') !important; 
  background-size: cover; 
  background-position: center;
}
.img-tournoi { 
  background-image: url('images/tournament.png') !important; 
  background-size: cover; 
}
.img-commu { 
  background-image: url('images/commu.png') !important; 
  background-size: cover; 
}

.shot, .big { background-blend-mode: overlay; }

.gallery .stack{display:grid; gap:14px}

.caption{
    position:absolute; left:16px; bottom:14px;
    background: rgba(7,0,17,.62);
    border:1px solid rgba(255,255,255,.12);
    border-radius: 14px;
    padding: 10px 12px;
    max-width: calc(100% - 32px);
    backdrop-filter: blur(10px);
    z-index:1;
}
.caption b{display:block; font-family:"Space Grotesk"; font-size:14px; letter-spacing:.2px}
.caption span{display:block; color: var(--muted); font-weight:1000; font-size:12px; margin-top:2px}

/* Contact */
.contact{display:grid; grid-template-columns: 1fr .9fr; gap: 14px; align-items:start}

form{display:grid; gap: 10px}
.field{display:grid; gap:6px}
label{color: rgba(243,240,255,.92); font-weight:1000; font-size: 12px; letter-spacing:.55px; text-transform:uppercase}
input, textarea, select{
    padding: 12px 12px;
    border-radius: 14px;
    border:1px solid rgba(255,255,255,.14);
    background: rgba(8,6,22,.62);
    color: var(--text);
    outline:none;
    transition: all .2s var(--ease);
}
input:focus, textarea:focus, select:focus{border-color: rgba(255,216,74,.78); box-shadow: 0 0 0 4px rgba(255,216,74,.12)}
textarea{min-height: 120px; resize: vertical}

.info{display:grid; gap: 12px}
.box{
    border:1px solid rgba(255,255,255,.12);
    background: rgba(255,255,255,.03);
    clip-path: polygon(var(--cut2) 0, calc(100% - var(--cut2)) 0, 100% var(--cut2), 100% calc(100% - var(--cut2)), calc(100% - var(--cut2)) 100%, var(--cut2) 100%, 0 calc(100% - var(--cut2)), 0 var(--cut2));
    padding: 16px;
}
.box b{font-family:"Space Grotesk"; font-size: 16px; letter-spacing:.2px}

.kv{margin-top:10px; display:grid; gap:8px}
.kv div{
    display:flex; justify-content:space-between; align-items:center; gap:12px;
    padding: 10px 12px;
    border-radius: 14px;
    border:1px solid rgba(255,255,255,.10);
    background: rgba(8,6,22,.55);
    color: rgba(243,240,255,.92);
    font-weight:1000;
    font-size: 13px;
    letter-spacing:.1px;
}
.kv div span{color: var(--muted); font-weight:1000; font-size: 12px; letter-spacing:.45px; text-transform:uppercase}

footer{padding: 44px 0 64px; border-top: 1px solid rgba(255,255,255,.10); color: rgba(243,240,255,.72)}
.footer-grid{display:flex; justify-content:space-between; align-items:flex-start; gap: 16px; flex-wrap:wrap}
.fine{color: var(--muted); font-weight:950; font-size:12px}

/* Mobile */
.menu-btn{display:none}
@media (max-width: 980px){
    .hero-grid{grid-template-columns: 1fr}
    .grid.cols-3{grid-template-columns: 1fr}
    .grid.cols-2{grid-template-columns: 1fr}
    .gallery{grid-template-columns: 1fr}
    .contact{grid-template-columns: 1fr}
    .hero-title{font-size: 42px}
    .hero-stats{grid-template-columns: 1fr;}
    .nav-links{display:none}
    .menu-btn{display:inline-flex}
    .nav-links.open{display:flex; position:absolute; left:18px; right:18px; top:66px; padding: 12px; border-radius: 18px; border:1px solid rgba(255,255,255,.12); background: rgba(7,0,17,.92); backdrop-filter: blur(12px)}
}

/* Toast */
.toast{position:fixed; left: 18px; right: 18px; bottom: 18px; max-width: var(--max); margin: 0 auto; z-index: 100; display:none}
.toast .t{
    border-radius: 18px;
    border:1px solid rgba(255,255,255,.14);
    background: rgba(8,6,22,.72);
    backdrop-filter: blur(12px);
    padding: 12px 14px;
    display:flex; align-items:flex-start; gap:12px;
    box-shadow: var(--shadow);
}
.toast .t b{font-family:"Space Grotesk"; display:block; margin-bottom:2px}
.toast .t span{color: rgba(243,240,255,.78); font-weight:850; font-size: 13px; line-height:1.4}
.toast .t .ok{
    width:34px; height:34px; border-radius: 14px;
    display:grid; place-items:center;
    border:1px solid rgba(86,255,211,.35);
    background: rgba(86,255,211,.08);
    flex:0 0 auto;
}

/* Modal */
dialog { border: none; background: rgba(10, 5, 30, 0.95); color: var(--text); }
dialog::backdrop{background: rgba(0,0,0,.55); backdrop-filter: blur(6px)}

/* Reduce motion */
@media (prefers-reduced-motion: reduce){
    *{transition:none !important; scroll-behavior:auto}
}