:root{
    --bg:#0a0a0c;
    --ink:#15141a;
    --blood:#6b0f1a;
    --blood-bright:#a8192c;
    --bone:#d8d4cc;
    --gold:#e8e4dc;
    --line: rgba(216,212,204,0.08);
  }
  *{margin:0;padding:0;box-sizing:border-box;}
  html{scroll-behavior:smooth;}
  body{
    background:var(--bg);
    color:var(--bone);
    font-family:'Inter', sans-serif;
    overflow-x:hidden;
    background-image:
      radial-gradient(ellipse at 20% 0%, rgba(107,15,26,0.12), transparent 50%),
      radial-gradient(ellipse at 80% 100%, rgba(232,228,220,0.04), transparent 50%);
  }
  .noise::before{
    content:"";
    position:fixed; inset:0;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E");
    pointer-events:none;
    z-index:999;
    mix-blend-mode:overlay;
  }
  h1,h2,h3{font-family:'Bebas Neue', sans-serif; letter-spacing:0.06em; font-weight:400;}

  /* HERO */
  .hero{
    min-height:100vh;
    display:flex;
    flex-direction:column;
    justify-content:center;
    padding:8vh 6vw;
    position:relative;
    border-bottom:1px solid var(--line);
    overflow:hidden;
  }
  .hero .artwork{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    object-fit:cover;
    object-position:center center;
    opacity:0.55;
    z-index:0;
  }
  /* GIF loop en background */
  .hero-bg-gif {
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    object-fit:cover;
    object-position:center center;
    opacity:0.55;
    z-index:0;
    display:block;
  }
  .hero .scrim{
    position:absolute;
    inset:0;
    background:linear-gradient(180deg, rgba(13,10,8,0.3) 0%, rgba(13,10,8,0.55) 45%, rgba(13,10,8,0.95) 100%);
    z-index:0;
  }
  .hero .content{
    position:relative;
    z-index:10;
  }
  .hero::after{
    content:"";
    position:absolute; left:0; right:0; bottom:0;
    height:1px;
    background:linear-gradient(90deg, transparent, var(--blood), transparent);
  }

  /* ANIMATIONS — visibilité garantie même sans animation */
  .eyebrow,
  .hero h1,
  .hero p.lead,
  .scroll-cue {
    opacity: 1;
    transform: translateY(0);
    animation: fadeUp 0.8s ease both;
    will-change: transform, opacity;
  }
  .eyebrow        { animation-delay: 0.1s; }
  .hero h1        { animation-delay: 0.25s; }
  .hero p.lead    { animation-delay: 0.4s; }
  .scroll-cue     { animation-delay: 0.6s; }

  @keyframes fadeUp{
    from { opacity:0; transform:translateY(18px); }
    to   { opacity:1; transform:translateY(0); }
  }

  .eyebrow{
    font-size:0.85rem;
    letter-spacing:0.35em;
    text-transform:uppercase;
    color:var(--gold);
    margin-bottom:1.2rem;
  }
  .hero h1{
    font-size:clamp(3rem, 8vw, 7rem);
    font-weight:400;
    line-height:1.05;
    color:var(--bone);
    text-shadow:0 0 40px rgba(139,26,26,0.4);
  }
  .hero h1 span{
    color:var(--blood-bright);
    -webkit-text-stroke:1px var(--gold);
  }
  .hero p.lead{
    margin-top:1.5rem;
    max-width:42ch;
    font-size:1.15rem;
    font-weight:500;
    color:rgba(232,224,208,0.75);
  }
  .scroll-cue{
    position:absolute;
    bottom:3rem; left:6vw;
    font-size:0.75rem;
    letter-spacing:0.3em;
    text-transform:uppercase;
    color:rgba(232,224,208,0.4);
  }

  /* RANK CARD */
  .rankcard-wrap{
    display:flex;
    justify-content:center;
    padding:6rem 6vw;
    border-bottom:1px solid var(--line);
  }
  .rankcard{
    width:min(420px, 100%);
    border:1px solid var(--gold);
    background:
      linear-gradient(180deg, rgba(201,162,39,0.06), transparent 40%),
      var(--ink);
    padding:2.5rem 2rem;
    position:relative;
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - 24px), calc(100% - 24px) 100%, 0 100%);
    box-shadow: 0 0 60px rgba(139,26,26,0.15), inset 0 0 40px rgba(0,0,0,0.5);
  }
  .rankcard::before{
    content:"";
    position:absolute; inset:8px;
    border:1px solid rgba(201,162,39,0.25);
    pointer-events:none;
  }
  .rankcard .seal{
    font-size:0.7rem;
    letter-spacing:0.3em;
    text-transform:uppercase;
    color:var(--gold);
    text-align:center;
    margin-bottom:0.5rem;
  }
  .rankcard .game{
    text-align:center;
    font-size:1.3rem;
    font-weight:700;
    color:var(--bone);
    margin-bottom:1.8rem;
    text-transform:uppercase;
    letter-spacing:0.15em;
  }
  .rankcard .rankrow{
    display:flex;
    align-items:baseline;
    justify-content:center;
    gap:0.6rem;
    margin-bottom:0.3rem;
  }
  .rankcard .rank-num{
    font-family:'Bebas Neue', sans-serif;
    font-weight:400;
    font-size:5.5rem;
    color:var(--blood-bright);
    line-height:1;
    text-shadow:0 0 30px rgba(168,25,44,0.6);
  }
  .rankcard .rank-label{
    font-size:1rem;
    text-transform:uppercase;
    letter-spacing:0.2em;
    color:var(--bone);
    padding-bottom:0.6rem;
  }
  .rankcard .region{
    text-align:center;
    font-size:0.85rem;
    letter-spacing:0.3em;
    color:rgba(232,224,208,0.55);
    text-transform:uppercase;
    margin-top:0.5rem;
  }
  .rankcard hr{
    border:none;
    border-top:1px solid var(--line);
    margin:1.8rem 0;
  }
  .rankcard .statline{
    display:flex;
    justify-content:space-between;
    font-size:0.85rem;
    text-transform:uppercase;
    letter-spacing:0.12em;
    color:rgba(232,224,208,0.6);
    padding:0.35rem 0;
  }
  .rankcard .statline b{
    color:var(--gold);
    font-weight:700;
  }

  /* SECTIONS */
  section.block{
    padding:6rem 6vw;
    border-bottom:1px solid var(--line);
  }
  section.block:last-of-type{border-bottom:none;}
  .section-head{
    display:flex;
    align-items:baseline;
    gap:1.2rem;
    margin-bottom:3rem;
  }
  .section-head .mark{
    color:var(--blood-bright);
    font-size:1.2rem;
  }
  .section-head h2{
    font-size:clamp(1.8rem, 4vw, 3rem);
    font-weight:600;
    text-transform:uppercase;
    letter-spacing:0.08em;
  }

  /* BERSERK BLOCK */
  .berserk-grid{
    display:grid;
    grid-template-columns: 1.1fr 1fr;
    gap:3rem;
    align-items:start;
  }
  @media (max-width: 800px){ .berserk-grid{grid-template-columns:1fr;} }
  .berserk-grid p{
    font-size:1.05rem;
    line-height:1.8;
    color:rgba(232,224,208,0.8);
    margin-bottom:1.2rem;
  }
  .berserk-grid p .hl{
    color:var(--blood-bright);
    font-weight:600;
  }
  .quote-block{
    border-left:3px solid var(--gold);
    padding-left:1.5rem;
    font-family:'Inter', sans-serif;
    font-size:1.15rem;
    font-weight:400;
    line-height:1.8;
    color:var(--bone);
    font-style:italic;
  }
  .quote-block span{
    display:block;
    margin-top:0.8rem;
    font-size:0.85rem;
    letter-spacing:0.3em;
    text-transform:uppercase;
    color:rgba(232,224,208,0.4);
  }

  /* STATS GRID */
  .stats-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit, minmax(180px, 1fr));
    gap:1px;
    background:var(--line);
    border:1px solid var(--line);
  }
  .stat-cell{
    background:var(--ink);
    padding:2rem 1.5rem;
    transition:background 0.25s ease, transform 0.25s ease;
  }
  .stat-cell:hover{
    background:#1f1815;
    transform:translateY(-3px);
  }
  .stat-cell .num{
    font-family:'Bebas Neue', sans-serif;
    font-size:2.8rem;
    font-weight:400;
    color:var(--gold);
    line-height:1;
  }
  .stat-cell .lbl{
    margin-top:0.6rem;
    font-size:0.8rem;
    letter-spacing:0.2em;
    text-transform:uppercase;
    color:rgba(232,224,208,0.6);
  }

  /* FOOTER */
  footer{
    padding:5rem 6vw;
    text-align:center;
  }
  footer h2{
    font-size:clamp(1.6rem, 4vw, 2.6rem);
    margin-bottom:1.5rem;
  }
  footer p{
    color:rgba(232,224,208,0.6);
    margin-bottom:2rem;
  }
  .links{
    display:flex;
    gap:1.2rem;
    justify-content:center;
    flex-wrap:wrap;
  }
  .links a{
    color:var(--bone);
    text-decoration:none;
    border:1px solid var(--gold);
    padding:0.7rem 1.6rem;
    font-size:0.8rem;
    letter-spacing:0.25em;
    text-transform:uppercase;
    transition:all 0.25s ease;
  }
  .links a:hover{
    background:var(--blood);
    border-color:var(--blood);
    color:var(--bone);
  }
  footer .end{
    margin-top:3rem;
    font-size:0.75rem;
    letter-spacing:0.3em;
    color:rgba(232,224,208,0.25);
    text-transform:uppercase;
  }

  a:focus-visible, button:focus-visible{
    outline:2px solid var(--gold);
    outline-offset:3px;
  }

  @media (prefers-reduced-motion: reduce){
    *{animation:none !important; transition:none !important;}
  }