/* PYRAMC — podstrona EarthSMP: ten sam styl „w ramkach”, ale w barwach Ziemi (ocean + trawa) */

/* paleta strony: --y (akcent) zmienia się z żółtego na oceaniczny błękit, reszta stylu zostaje */
body.earth{
  --y:#2A74D8;--y-dark:#1D5FBF;--y-light:#5B9BF0;--y-frame:#CFE1FA;--on-y:#fff;
  --e-grass:#3FA23A;--e-grass-frame:#D3EFCF;--e-leaf:#7BE06E;--e-deep:#0F2E55;--e-deep-frame:#D4DFEE;
}
[data-theme="dark"] body.earth{--y-frame:rgba(42,116,216,.30);--e-grass-frame:rgba(63,162,58,.28);--e-deep-frame:rgba(255,255,255,.10)}
.earth .sec-title h2{color:var(--e-leaf)}
.earth .hdr nav a[aria-current="page"]::after{transform:scaleX(1)}

/* ---------- hero ---------- */
.earth .hero-panel{--hp-stripe:rgba(255,255,255,.12);--hp-glow:rgba(150,255,170,.30)}
.earth .slide h1{font-size:44px;letter-spacing:.08em}
.e-panel .btn:hover{background:#fff;color:#14120c;box-shadow:0 0 0 6px rgba(255,255,255,.35)}
.earth .btn-g{background:var(--e-grass);color:#fff;box-shadow:0 0 0 6px var(--e-grass-frame)}
.tile.e-green{--c:var(--e-grass);--cf:var(--e-grass-frame);color:#fff}
.tile.e-night{--c:var(--e-deep);--cf:var(--e-deep-frame);color:#fff}

/* chmurki z kwadratów */
.e-clouds{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0}
.e-cloud{--u:12px;position:absolute;left:-160px;width:var(--u);height:var(--u);background:#fff;opacity:.85;
  animation:eDrift var(--t,60s) linear infinite;animation-delay:var(--d,0s);
  box-shadow:
    calc(var(--u)*1) 0 0 #fff,calc(var(--u)*2) 0 0 #fff,calc(var(--u)*3) 0 0 #fff,calc(var(--u)*4) 0 0 #fff,calc(var(--u)*5) 0 0 #fff,
    calc(var(--u)*1) calc(var(--u)*-1) 0 #fff,calc(var(--u)*2) calc(var(--u)*-1) 0 #fff,calc(var(--u)*3) calc(var(--u)*-1) 0 #fff,calc(var(--u)*4) calc(var(--u)*-1) 0 #fff,
    calc(var(--u)*2) calc(var(--u)*-2) 0 #fff,calc(var(--u)*3) calc(var(--u)*-2) 0 #fff}
@keyframes eDrift{to{transform:translateX(1500px)}}

/* kwadratowa Ziemia: obracający się sześcian z teksturą generowaną w JS (continenty ciągłe przez krawędzie) */
.e-stage{position:relative;width:min(320px,100%);height:310px;display:grid;place-items:center}
.e-stage::before{content:"";position:absolute;inset:6%;background:radial-gradient(circle,rgba(255,255,255,.34),transparent 66%);pointer-events:none}
.e-world{--s:192px;position:relative;perspective:1000px;animation:float 5.5s ease-in-out infinite}
.e-tilt{transform-style:preserve-3d;transform:rotateZ(-13deg) rotateX(-16deg)}
.e-cube{position:relative;width:var(--s);height:var(--s);transform-style:preserve-3d;animation:eSpin 32s linear infinite}
.e-face{position:absolute;inset:0;width:100%;height:100%;image-rendering:pixelated;box-shadow:inset 0 0 0 2px rgba(0,0,0,.22);backface-visibility:hidden}
.e-face.f-front{transform:translateZ(calc(var(--s)/2))}
.e-face.f-back{transform:rotateY(180deg) translateZ(calc(var(--s)/2))}
.e-face.f-right{transform:rotateY(90deg) translateZ(calc(var(--s)/2))}
.e-face.f-left{transform:rotateY(-90deg) translateZ(calc(var(--s)/2))}
.e-face.f-top{transform:rotateX(90deg) translateZ(calc(var(--s)/2))}
.e-face.f-bottom{transform:rotateX(-90deg) translateZ(calc(var(--s)/2))}
@keyframes eSpin{to{transform:rotateY(360deg)}}
.e-shadow{position:absolute;bottom:4px;left:50%;width:150px;height:18px;margin-left:-75px;background:rgba(0,0,0,.2);
  clip-path:polygon(8% 0,92% 0,100% 50%,92% 100%,8% 100%,0 50%);animation:eShadow 5.5s ease-in-out infinite}
@keyframes eShadow{0%,100%{transform:scaleX(1);opacity:1}50%{transform:scaleX(.8);opacity:.6}}

/* ---------- karty trybu ---------- */
.e-features{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:56px 44px;padding:0 9px 9px 0}
.e-feature{margin:0;width:100%}
.e-body{display:flex;flex-direction:column;gap:12px;padding:28px 28px 32px}
.e-body h3{font-size:16px;letter-spacing:.1em}
.e-body p{color:var(--muted);font-size:13px}
.e-block{width:64px;height:64px;margin:6px 0 10px;image-rendering:pixelated;box-shadow:0 0 0 3px var(--edge),0 0 0 8px var(--card-frame);transition:transform .3s var(--ease)}
.e-feature:hover .e-block{transform:translateY(-4px) rotate(-6deg)}
.btn-sm-e{align-self:flex-start;min-height:40px;padding:.55rem 1.1rem;margin-top:8px;font-size:16px;box-shadow:0 0 0 4px var(--btn-frame)}
.btn-sm-e:hover{box-shadow:0 0 0 4px var(--y-frame)}

/* ---------- kroki ---------- */
.e-steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:56px 44px;padding:0 9px 9px 0;list-style:none}
.e-step{background:var(--card);box-shadow:0 0 0 3px var(--edge),0 0 0 9px var(--card-frame),9px 9px 0 9px var(--drop);padding:28px 26px 30px}
.e-step b{display:grid;place-items:center;width:48px;height:48px;margin-bottom:22px;background:var(--e-grass);color:#fff;font:400 24px/1 var(--font-head);box-shadow:0 0 0 5px var(--e-grass-frame)}
.e-step h3{font-size:16px;letter-spacing:.1em;margin-bottom:10px}
.e-step p{color:var(--muted);font-size:13px}
.e-step code{padding:.1rem .45rem;background:var(--card-img);font:600 13px/1.4 var(--font);color:var(--text)}

/* ---------- baner mapy ---------- */
.e-banner{background:var(--e-deep);box-shadow:0 0 0 3px var(--edge),0 0 0 16px var(--e-deep-frame),12px 12px 0 16px var(--drop)}
.e-banner::after{background:radial-gradient(520px 260px at 50% 0,rgba(95,240,81,.30),transparent 70%)}
.e-banner h2{color:var(--e-leaf)}

@media (max-width:1100px){
  .e-features,.e-steps{grid-template-columns:1fr;gap:44px}
}
@media (max-width:900px){
  .e-stage{height:230px}
  .e-world{--s:144px}
  .e-shadow{width:110px;margin-left:-55px}
}
@media (max-width:640px){
  .earth .slide h1{font-size:30px}
}