:root{
    --grass:#6aa84f;
    --grass-dark:#557d3c;
    --dirt:#8b5a2b;
    --dirt-dark:#70421f;
    --sky-1:#0b0f18;
    --sky-2:#121a2b;
    --text:#e8edf7;
    --muted:#8b97ad;
    --accent:#8fd14f;
    --mono: ui-monospace, "Cascadia Mono", "Segoe UI Mono", Consolas, "Liberation Mono", monospace;
  }

  *{box-sizing:border-box}

  html,body{height:100%}
  body{
    margin:0;
    min-height:100vh;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:32px 20px;
    font-family:var(--mono);
    color:var(--text);
    background:
      radial-gradient(1100px 600px at 50% -10%, #1b2740 0%, transparent 62%),
      linear-gradient(180deg, var(--sky-1), var(--sky-2) 55%, #0a0e15);
    overflow-x:hidden;
  }

  /* ночное небо: звёзды-пиксели */
  body::before{
    content:"";
    position:fixed;
    inset:0;
    pointer-events:none;
    background-image:
      radial-gradient(1px 1px at 12% 18%, #cfe3ff 99%, transparent),
      radial-gradient(1px 1px at 78% 12%, #ffffff 99%, transparent),
      radial-gradient(1px 1px at 32% 34%, #b7cdf0 99%, transparent),
      radial-gradient(1px 1px at 62% 28%, #ffffff 99%, transparent),
      radial-gradient(1px 1px at 88% 40%, #cfe3ff 99%, transparent),
      radial-gradient(1px 1px at 22% 58%, #ffffff 99%, transparent),
      radial-gradient(1px 1px at 70% 62%, #b7cdf0 99%, transparent),
      radial-gradient(1px 1px at 45% 76%, #ffffff 99%, transparent),
      radial-gradient(1px 1px at 90% 80%, #cfe3ff 99%, transparent),
      radial-gradient(1px 1px at 8% 88%, #ffffff 99%, transparent);
    opacity:.75;
    animation:twinkle 6s steps(2,end) infinite;
  }

  /* сетка «блоков» на фоне */
  body::after{
    content:"";
    position:fixed;
    inset:0;
    pointer-events:none;
    background-image:
      linear-gradient(rgba(143,209,79,.045) 1px, transparent 1px),
      linear-gradient(90deg, rgba(143,209,79,.045) 1px, transparent 1px);
    background-size:48px 48px;
    mask-image:radial-gradient(circle at 50% 40%, #000 0%, transparent 78%);
    -webkit-mask-image:radial-gradient(circle at 50% 40%, #000 0%, transparent 78%);
  }

  @keyframes twinkle{0%,100%{opacity:.75}50%{opacity:.35}}

  main{
    position:relative;
    z-index:1;
    width:100%;
    max-width:640px;
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:28px;
    text-align:center;
  }

  /* ---------- изометрический блок ---------- */
  .stage{
    perspective:900px;
    width:160px;
    height:170px;
    display:flex;
    align-items:center;
    justify-content:center;
    position:relative;
  }
  .bob{animation:bob 4.5s ease-in-out infinite}
  @keyframes bob{
    0%,100%{transform:translateY(-6px)}
    50%{transform:translateY(6px)}
  }
  .cube{
    position:relative;
    width:96px;
    height:96px;
    transform-style:preserve-3d;
    transform:rotateX(-22deg) rotateY(-34deg);
    animation:spin 26s linear infinite;
  }
  @keyframes spin{
    from{transform:rotateX(-22deg) rotateY(0deg)}
    to{transform:rotateX(-22deg) rotateY(360deg)}
  }
  .face{
    position:absolute;
    inset:0;
    border:1px solid rgba(0,0,0,.35);
  }
  /* верх — трава */
  .top{
    transform:rotateX(90deg) translateZ(48px);
    background-color:var(--grass);
    background-image:
      repeating-linear-gradient(90deg, rgba(0,0,0,.10) 0 6px, transparent 6px 12px),
      repeating-linear-gradient(0deg, rgba(255,255,255,.10) 0 6px, transparent 6px 12px);
  }
  /* бока — земля с травяной кромкой */
  .side{
    background-color:var(--dirt);
    background-image:
      linear-gradient(180deg, var(--grass) 0 12px, var(--grass-dark) 12px 16px, transparent 16px),
      repeating-linear-gradient(90deg, rgba(0,0,0,.12) 0 8px, transparent 8px 16px),
      repeating-linear-gradient(0deg, rgba(0,0,0,.10) 0 8px, transparent 8px 16px);
  }
  .front{transform:translateZ(48px)}
  .right{transform:rotateY(90deg) translateZ(48px)}
  .back{transform:rotateY(180deg) translateZ(48px)}
  .left{transform:rotateY(-90deg) translateZ(48px)}
  .bottom{
    transform:rotateX(-90deg) translateZ(48px);
    background-color:var(--dirt-dark);
  }

  .shadow{
    position:absolute;
    bottom:8px;
    width:120px;
    height:18px;
    border-radius:50%;
    background:radial-gradient(closest-side, rgba(0,0,0,.55), transparent);
    animation:shadow 4.5s ease-in-out infinite;
  }
  @keyframes shadow{
    0%,100%{transform:scale(.86);opacity:.45}
    50%{transform:scale(1);opacity:.65}
  }

  /* ---------- текст ---------- */
  h1{
    margin:0;
    font-size:clamp(34px,9vw,62px);
    letter-spacing:.16em;
    line-height:1;
    font-weight:800;
    color:#f3f7ff;
    text-shadow:
      4px 0 0 #1d2a44, -4px 0 0 #1d2a44,
      0 4px 0 #1d2a44, 0 -4px 0 #1d2a44,
      8px 8px 0 rgba(0,0,0,.45);
  }
  .sub{
    margin:0;
    font-size:clamp(11px,2.6vw,14px);
    letter-spacing:.42em;
    text-transform:uppercase;
    color:var(--muted);
  }
  .badge{
    display:inline-flex;
    align-items:center;
    gap:10px;
    padding:9px 16px;
    font-size:12px;
    letter-spacing:.16em;
    text-transform:uppercase;
    color:#0d1508;
    background:linear-gradient(180deg,#a4e065,#7ec043);
    border:2px solid #5d9130;
    box-shadow:
      inset 0 2px 0 rgba(255,255,255,.45),
      inset 0 -3px 0 rgba(0,0,0,.18),
      0 4px 0 #3f6621,
      0 8px 18px rgba(0,0,0,.35);
    image-rendering:pixelated;
  }
  .dot{
    width:8px;height:8px;
    background:#202c10;
    box-shadow:0 0 8px rgba(32,44,16,.7);
    animation:blink 1.6s steps(2,end) infinite;
  }
  @keyframes blink{0%,49%{opacity:1}50%,100%{opacity:.15}}

  p.lead{
    margin:0;
    max-width:44ch;
    font-size:14px;
    line-height:1.75;
    color:#b6c2d6;
  }

  /* XP-полоса */
  .xp{
    width:min(360px,100%);
    height:12px;
    background:#1a2333;
    border:2px solid #2b3a54;
    box-shadow:inset 0 2px 0 rgba(0,0,0,.5);
    overflow:hidden;
    position:relative;
  }
  .xp::before{
    content:"";
    position:absolute;
    inset:2px;
    width:42%;
    background:
      repeating-linear-gradient(115deg, #8fd14f 0 8px, #7bc043 8px 16px);
    box-shadow:0 0 12px rgba(143,209,79,.45);
    animation:load 3.2s ease-in-out infinite alternate;
  }
  @keyframes load{
    from{width:22%}
    to{width:64%}
  }

  footer{
    display:flex;
    flex-wrap:wrap;
    gap:8px 20px;
    justify-content:center;
    font-size:11px;
    letter-spacing:.18em;
    text-transform:uppercase;
    color:#6f7d93;
  }
  footer span{white-space:nowrap}
  footer b{color:#93a3bd;font-weight:600}

  @media (prefers-reduced-motion: reduce){
    .cube,.bob,.shadow,.xp::before,body::before,.dot{animation:none !important}
    .xp::before{width:45%}
  }