:root{
    --bg-deep:#070f0a;
    --bg-mid:#0f1d13;
    --panel:#132419;
    --panel-light:#1b3323;
    --accent-moss:#4a7c3f;
    --accent-glow:#8fd66b;
    --text-primary:#dcead2;
    --text-muted:#6f8a6a;
    --border:#2c4530;
    --slot-light:#3a5c3a;
    --slot-dark:#0a1610;
  }

  *{box-sizing:border-box;}

  html,body{
    margin:0;
    padding:0;
    min-height:100%;
    background:var(--bg-deep);
    color:var(--text-primary);
    font-family:'VT323', monospace;
    overflow-x:hidden;
  }

  body{
    position:relative;
    min-height:100vh;
    background:
      radial-gradient(ellipse 1200px 600px at 50% -10%, rgba(143,214,107,0.08), transparent 60%),
      linear-gradient(180deg, #0b1a10 0%, #0e2014 35%, #0a170d 70%, #050b06 100%);
  }

  body::before{
    content:"";
    position:fixed;
    inset:0;
    background-image:
      linear-gradient(rgba(143,214,107,0.035) 1px, transparent 1px),
      linear-gradient(90deg, rgba(143,214,107,0.035) 1px, transparent 1px);
    background-size:28px 28px;
    pointer-events:none;
    z-index:0;
  }

  .terrain{
    position:fixed;
    left:0; right:0; bottom:0;
    height:34vh;
    z-index:1;
    pointer-events:none;
  }
  .terrain-layer{
    position:absolute;
    left:0; right:0; bottom:0;
    width:100%;
  }
  .terrain-back{
    height:70%;
    background:#0c1c11;
    clip-path:polygon(
      0% 100%, 0% 55%, 6% 55%, 6% 40%, 14% 40%, 14% 48%, 22% 48%, 22% 30%,
      30% 30%, 30% 42%, 40% 42%, 40% 25%, 48% 25%, 48% 38%, 58% 38%, 58% 20%,
      66% 20%, 66% 34%, 76% 34%, 76% 46%, 84% 46%, 84% 32%, 92% 32%, 92% 44%,
      100% 44%, 100% 100%
    );
    opacity:0.85;
  }
  .terrain-front{
    height:48%;
    background:#050f08;
    clip-path:polygon(
      0% 100%, 0% 70%, 8% 70%, 8% 58%, 16% 58%, 16% 64%, 26% 64%, 26% 46%,
      34% 46%, 34% 60%, 44% 60%, 44% 40%, 54% 40%, 54% 55%, 64% 55%, 64% 35%,
      72% 35%, 72% 52%, 82% 52%, 82% 62%, 90% 62%, 90% 48%, 100% 48%, 100% 100%
    );
  }
  .tree{
    position:absolute;
    bottom:38%;
    width:16px;
    image-rendering:pixelated;
  }
  .tree-trunk{
    width:6px; height:14px;
    background:#3b2417;
    margin:0 auto;
  }
  .tree-leaves{
    width:20px; height:20px;
    background:#1f3a1a;
    margin-left:-7px;
    box-shadow:0 -8px 0 -2px #24421f;
  }

  .wrap{
    position:relative;
    z-index:2;
    max-width:980px;
    margin:0 auto;
    padding:56px 20px 90px;
  }

  .emblem{
    width:96px;
    height:96px;
    margin:0 auto 22px;
    border-radius:50%;
    border:3px solid var(--accent-moss);
    box-shadow:
      0 0 0 6px rgba(74,124,63,0.12),
      0 0 24px rgba(143,214,107,0.18),
      inset 0 0 18px rgba(0,0,0,0.5);
    display:flex;
    align-items:center;
    justify-content:center;
    position:relative;
    animation:spin-slow 40s linear infinite;
  }
  .emblem::before{
    content:"";
    position:absolute;
    inset:8px;
    border-radius:50%;
    border:1px dashed rgba(143,214,107,0.35);
  }
  .emblem-core{
    width:34px; height:34px;
    background:var(--accent-glow);
    clip-path:polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
    box-shadow:0 0 14px rgba(143,214,107,0.7);
    animation:counter-spin 40s linear infinite;
  }
  @keyframes spin-slow{ to{ transform:rotate(360deg); } }
  @keyframes counter-spin{ to{ transform:rotate(-360deg); } }

  h1{
    text-align:center;
    font-family:'Press Start 2P', monospace;
    font-size:clamp(20px, 4vw, 32px);
    letter-spacing:2px;
    margin:0 0 8px;
    color:var(--text-primary);
    text-shadow:0 0 18px rgba(143,214,107,0.35), 2px 2px 0 #04140a;
  }

  .MOTD {
    text-align:center;
    font-family:'Press Start 2P', monospace;
    font-size:clamp(5px, 4vw, 10px);
    letter-spacing:2px;
    margin:0 0 8px;
    margin-top: 14px;
    color:var(--text-primary);
    text-shadow:0 0 18px rgba(143,214,107,0.35), 2px 2px 0 #04140a;
    color:var(--accent-glow);
  }

  .status-row{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:10px;
    margin:18px 0 44px;
    font-size:19px;
    color:var(--text-muted);
  }

  .dot{
    width:10px; height:10px;
    border-radius:50%;
    background:#555;
    box-shadow:0 0 0 rgba(0,0,0,0);
  }
  .dot.online{
    background:var(--accent-glow);
    box-shadow:0 0 10px var(--accent-glow);
    animation:pulse 2s ease-in-out infinite;
  }
  .dot.offline{ background:#7c4040; box-shadow:0 0 10px rgba(190,80,80,0.6); }
  @keyframes pulse{
    0%,100%{ opacity:1; }
    50%{ opacity:0.45; }
  }

  .panel{
    background:var(--panel);
    border:1px solid var(--border);
    border-radius:6px;
    padding:32px 24px;
    box-shadow:0 20px 50px rgba(0,0,0,0.4);
  }

  .panel-title{
    font-family:'Press Start 2P', monospace;
    font-size:13px;
    letter-spacing:1px;
    color:var(--text-primary);
    margin:0 0 24px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    flex-wrap:wrap;
    gap:10px;
  }
  .panel-title span.count{
    color:var(--accent-glow);
    font-size:12px;
  }

  .grid{
    display:grid;
    grid-template-columns:repeat(auto-fill, minmax(110px, 1fr));
    gap:16px;
  }

  .slot{
    padding:14px 8px 12px;
    text-align:center;
    transition:transform 0.12s ease, background 0.12s ease;
  }
  .slot:hover{
    background:#16301d;
    transform:translateY(-3px);
  }

  .slot img{
    width:84px;
    height:84px;
    image-rendering:pixelated;
    display:block;
    margin:0 auto 10px;
    border:1px solid var(--border);
  }

  .slot .pname{
    font-size:18px;
    color:var(--text-primary);
    word-break:break-word;
    line-height:1.1;
  }

  .empty-state, .error-state{
    text-align:center;
    padding:40px 10px;
    color:var(--text-muted);
    font-size:20px;
  }

  .error-state{ color:#c98a8a; }

  .footer{
    text-align:center;
    margin-top:28px;
    font-size:15px;
    color:var(--text-muted);
    letter-spacing:0.5px;
  }

  .skeleton{
    display:grid;
    grid-template-columns:repeat(auto-fill, minmax(110px, 1fr));
    gap:16px;
  }
  .skeleton-slot{
    height:100px;
    background:linear-gradient(90deg, var(--bg-mid) 0%, #1a3220 50%, var(--bg-mid) 100%);
    background-size:200% 100%;
    animation:shimmer 1.4s ease-in-out infinite;
    border:1px solid var(--border);
  }

  @keyframes shimmer{
    0%{ background-position:200% 0; }
    100%{ background-position:-200% 0; }
  }

  @media (prefers-reduced-motion: reduce){
    .emblem, .emblem-core, .dot.online, .skeleton-slot{ animation:none !important; }
  }

  @media (max-width:480px){
    .server-address{ font-size:17px; }
    .panel{ padding:22px 14px; }
  }