:root{
    --grass-top:#6cbb3c;
    --grass-top-dark:#5aa030;
    --dirt:#7a5230;
    --dirt-dark:#5e3f24;
    --stone:#8a8a8a;
    --stone-dark:#5f5f5f;
    --sky-top:#4aa3d8;
    --sky-bottom:#bfe8ff;
    --ink:#1c1c1c;
    --gold:#ffcc33;
    --gold-dark:#b8860b;
    --panel:#c8c8c8;
    --panel-dark:#8f8f8f;
    --white-text:#f5f5f5;
  }

  * { box-sizing: border-box; }

  html { scroll-behavior: smooth; }

  body{
    margin:0;
    font-family:'VT323', monospace;
    font-size:22px;
    color:var(--ink);
    background: linear-gradient(var(--sky-top), var(--sky-bottom) 55%, var(--sky-bottom) 100%);
    image-rendering: pixelated;
    min-height:100vh;
  }

  .pixel-font{
    font-family:'Press Start 2P', monospace;
  }

  /* ---------- floating pixel clouds ---------- */
  .clouds{
    position:fixed;
    top:0; left:0; right:0;
    height:100%;
    pointer-events:none;
    z-index:0;
    overflow:hidden;
  }
  .cloud{
    position:absolute;
    background:#ffffff;
    opacity:0.85;
    box-shadow:
      24px 0 0 #fff, 48px 0 0 #fff,
      12px -12px 0 #fff, 36px -12px 0 #fff,
      12px 12px 0 #fff, 36px 12px 0 #fff;
    width:16px; height:16px;
  }
  .cloud1{ top:8%; left:6%; transform:scale(2); animation: drift 60s linear infinite; }
  .cloud2{ top:18%; left:70%; transform:scale(1.4); animation: drift 80s linear infinite reverse; }
  .cloud3{ top:4%; left:40%; transform:scale(1.1); animation: drift 100s linear infinite; }
  @keyframes drift{
    from{ transform: translateX(-40px) scale(1.4); }
    to{ transform: translateX(40px) scale(1.4); }
  }

  .wrap{
    position:relative;
    z-index:1;
    max-width:760px;
    margin:0 auto;
    padding:0 20px 80px;
  }

  /* ---------- header / hero ---------- */
  header{
    text-align:center;
    padding:56px 0 24px;
  }

  .logo-block{
    display:inline-block;
    padding:10px;
    background:var(--dirt);
    border:6px solid var(--dirt-dark);
    box-shadow: 0 0 0 4px var(--ink);
    image-rendering: pixelated;
    animation: pop-in 0.5s ease-out;
  }
  .logo-block img{
    display:block;
    width:220px;
    height:220px;
    image-rendering: pixelated;
  }

  @keyframes pop-in{
    0%{ transform: scale(0.6) rotate(-3deg); opacity:0; }
    70%{ transform: scale(1.05) rotate(1deg); opacity:1; }
    100%{ transform: scale(1) rotate(0); }
  }

  h1.pixel-font{
    margin:28px 0 6px;
    font-size:20px;
    line-height:1.8;
    color:var(--white-text);
    text-shadow:
      3px 3px 0 var(--ink),
      -1px -1px 0 var(--ink), 1px -1px 0 var(--ink), -1px 1px 0 var(--ink);
    letter-spacing:1px;
  }

  .subtitle{
    font-size:26px;
    color:var(--ink);
    opacity:0.85;
    max-width:480px;
    margin:0 auto;
  }

  /* ---------- sections as "blocks" ---------- */
  section{
    margin:40px 0;
  }

  .panel{
    background:var(--panel);
    border:6px solid var(--stone-dark);
    box-shadow: inset 0 0 0 4px #dedede, 0 6px 0 var(--stone-dark);
    padding:28px 26px;
  }

  .panel h2{
    font-family:'Press Start 2P', monospace;
    font-size:15px;
    margin:0 0 18px;
    color:var(--ink);
    display:flex;
    align-items:center;
    gap:10px;
  }

  .panel p{
    font-size:24px;
    line-height:1.5;
    margin:0 0 14px;
  }

  .grass-tag{
    display:inline-block;
    width:14px; height:14px;
    background:var(--grass-top);
    box-shadow: 0 0 0 3px var(--ink);
    flex-shrink:0;
  }

  /* ---------- server address "crafting slot" ---------- */
  .address-box{
    text-align:center;
    padding:30px 20px;
  }

  .address-label{
    font-size:20px;
    letter-spacing:1px;
    color:#333;
    margin-bottom:14px;
    font-family:'Press Start 2P', monospace;
    font-size:12px;
  }

  .slot{
    display:inline-flex;
    align-items:center;
    gap:14px;
    background:var(--ink);
    border:5px solid #000;
    box-shadow: inset 0 0 0 3px #444;
    padding:16px 22px;
    max-width:100%;
  }

  .slot code{
    font-family:'VT323', monospace;
    font-size:30px;
    color:#7CFC00;
    letter-spacing:1px;
    word-break:break-all;
  }

  .copy-btn{
    font-family:'Press Start 2P', monospace;
    font-size:11px;
    color:var(--ink);
    background:var(--gold);
    border:0;
    box-shadow:
      inset -4px -4px 0 var(--gold-dark),
      inset 4px 4px 0 #ffe27a;
    padding:14px 16px;
    cursor:pointer;
    flex-shrink:0;
  }
  .copy-btn:hover{ filter:brightness(1.05); }
  .copy-btn:active{
    box-shadow:
      inset 4px 4px 0 var(--gold-dark),
      inset -4px -4px 0 #ffe27a;
    transform: translateY(1px);
  }

  .copy-feedback{
    display:block;
    margin-top:12px;
    font-size:20px;
    color:#2f6b1f;
    min-height:1.4em;
    font-family:'VT323', monospace;
  }

  /* ---------- how-to screenshot ---------- */
  .howto-img-wrap{
    text-align:center;
    margin-top:10px;
  }
  .howto-img-wrap img{
    max-width:100%;
    border:5px solid var(--ink);
    image-rendering: pixelated;
  }
  .howto-caption{
    font-size:20px;
    color:#444;
    margin-top:10px;
  }

  /* ---------- steps ---------- */
  .steps{
    list-style:none;
    margin:0; padding:0;
    display:flex;
    flex-direction:column;
    gap:14px;
  }
  .steps li{
    display:flex;
    align-items:flex-start;
    gap:14px;
    font-size:24px;
  }
  .step-num{
    font-family:'Press Start 2P', monospace;
    font-size:14px;
    background:var(--grass-top);
    color:var(--ink);
    box-shadow: 0 0 0 3px var(--ink);
    padding:6px 9px;
    flex-shrink:0;
  }

  /* ---------- nickname CTA ---------- */
  .cta-panel{
    background:var(--dirt);
    border:6px solid var(--dirt-dark);
    box-shadow: inset 0 0 0 4px #9c6b3f, 0 6px 0 var(--dirt-dark);
    color:var(--white-text);
  }
  .cta-panel h2{ color:var(--white-text); }
  .cta-panel p{ font-size:24px; }
  .cta-panel .highlight{
    color:var(--gold);
  }

  /* ---------- footer ---------- */
  footer{
    text-align:center;
    padding-top:20px;
    font-size:18px;
    color:#3a3a3a;
  }

  .grass-strip{
    height:34px;
    background: repeating-linear-gradient(
      90deg,
      var(--grass-top) 0px, var(--grass-top) 30px,
      var(--grass-top-dark) 30px, var(--grass-top-dark) 32px
    );
    border-top:5px solid var(--ink);
    border-bottom:5px solid var(--dirt-dark);
    margin-bottom:0;
  }
  .dirt-strip{
    height:16px;
    background: repeating-linear-gradient(
      90deg,
      var(--dirt) 0px, var(--dirt) 30px,
      var(--dirt-dark) 30px, var(--dirt-dark) 32px
    );
  }

  @media (max-width:480px){
    body{ font-size:19px; }
    h1.pixel-font{ font-size:15px; }
    .logo-block img{ width:160px; height:160px; }
    .slot{ flex-direction:column; }
    .slot code{ font-size:22px; }
  }

  @media (prefers-reduced-motion: reduce){
    .logo-block, .cloud1, .cloud2, .cloud3{ animation:none; }
  }