/* Elephant Pop, index.html. Moved out of the page as it was. */

  :root{
    --bg:#0e2a1c; --bg2:#123726; --line:#1e4a33;
    --cream:#fff6e3; --dim:#c8b498; --faint:#7d6a55;
    --gold:#ffc23c; --gold-d:#e09415; --ink:#2a1a12;
    --font:"Fredoka",system-ui,-apple-system,"Segoe UI",sans-serif;
  }
  *{box-sizing:border-box}
  html{-webkit-text-size-adjust:100%; scroll-behavior:smooth}
  body{
    margin:0; background:var(--bg); color:var(--cream);
    font-family:var(--font); font-size:17px; line-height:1.65;
  }
  .wrap{max-width:60rem; margin:0 auto; padding:0 1.25rem}
  a{color:var(--gold)}
  a:hover{color:var(--gold-d)}
  .skip{
    position:absolute; left:-9999px; top:0; background:var(--gold); color:var(--ink);
    padding:.6rem 1rem; border-radius:0 0 8px 0; font-weight:700; z-index:10;
  }
  .skip:focus{left:0}

  .top{border-bottom:1px solid var(--line)}
  .top .wrap{display:flex; align-items:center; justify-content:space-between; height:4rem; gap:1rem}
  .brand{display:flex; align-items:center; gap:.6rem; color:var(--cream); text-decoration:none; font-weight:700}
  .brand img{width:30px; height:30px; border-radius:8px; display:block}
  .top nav a{margin-left:1.1rem; font-size:.92rem}

  .hero{padding:3.5rem 0 2.5rem; text-align:center}
  h1{
    margin:0 0 .75rem; color:var(--gold); line-height:1.05;
    font-size:clamp(2.4rem,9vw,4rem); letter-spacing:-.01em;
  }
  .lede{max-width:34rem; margin:0 auto 2rem; color:var(--dim); font-size:1.06rem}
  .cta{
    display:inline-block; padding:.75em 1.6em; border-radius:14px;
    background:var(--gold); border:2px solid var(--gold); color:var(--ink);
    font-weight:700; font-size:1.02rem; text-decoration:none;
  }
  .cta:hover{background:var(--gold-d); border-color:var(--gold-d); color:var(--ink)}
  .under{margin:1rem 0 0; font-size:.88rem; color:var(--faint)}

  .shots{
    display:grid; gap:.9rem; padding:1rem 0 3.5rem;
    grid-template-columns:repeat(auto-fit,minmax(140px,1fr));
  }
  .shots img{
    width:100%; height:auto; display:block; border-radius:12px;
    border:1px solid var(--line); background:var(--bg2);
  }

  section{padding:0 0 3.5rem}
  h2{
    margin:0 0 .4rem; font-size:1.5rem; line-height:1.2; color:var(--cream);
  }
  .note{margin:0 0 1.6rem; color:var(--faint); font-size:.92rem}

  .modes{list-style:none; margin:0; padding:0; display:grid; gap:1rem;
    grid-template-columns:repeat(auto-fit,minmax(13rem,1fr))}
  .modes li{background:var(--bg2); border:1px solid var(--line); border-radius:14px; padding:1.15rem 1.25rem}
  .modes h3{margin:0 0 .35rem; font-size:1.05rem; color:var(--gold)}
  .modes p{margin:0; color:var(--dim); font-size:.95rem}

  .stats{list-style:none; margin:0 0 1.6rem; padding:0; display:grid; gap:.6rem;
    grid-template-columns:repeat(auto-fit,minmax(7.5rem,1fr))}
  .stats li{
    background:var(--bg2); border:1px solid var(--line); border-radius:10px;
    padding:.7rem .9rem; display:flex; flex-direction:column; gap:.1rem;
  }
  .stats b{font-size:1.35rem; color:var(--gold); font-weight:700; line-height:1.1}
  .stats span{font-size:.85rem; color:var(--dim)}

  section p.body{margin:0 0 .9rem; color:var(--dim); max-width:44rem}
  section p.body:last-child{margin-bottom:0}

  footer{border-top:1px solid var(--line); padding:1.75rem 0 3rem; font-size:.86rem; color:var(--faint)}
  footer .wrap{display:flex; flex-wrap:wrap; gap:.5rem 1.25rem; justify-content:space-between}
  footer a{color:var(--faint)}
  footer a:hover{color:var(--dim)}

  @media (max-width:48rem){
    .shots{
      display:flex; gap:.75rem; overflow-x:auto; scroll-snap-type:x mandatory;
      padding:1rem 0 3rem; scrollbar-width:none;
    }
    .shots::-webkit-scrollbar{display:none}
    .shots img{flex:0 0 44%; max-width:190px; scroll-snap-align:start}
  }
  @media (max-width:30rem){
    .hero{padding:2.5rem 0 2rem}
  }