/* ===== Wspólny styl: blocky Minecraft ===== (linkowany przez wszystkie strony) */
:root {
    --pixel:'Press Start 2P', ui-monospace, 'Courier New', monospace;
    --body:'Segoe UI', system-ui, -apple-system, sans-serif;
    --mono:ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
    --sky:#7ec0ff; --sky2:#a9d7ff;
    --grass:#6cbb3c; --grass-l:#8ed15b; --grass-d:#4e8b2a;
    --dirt:#8a6440; --dirt-d:#6b4d30;
    --stone:#9d9d9d; --stone-l:#c6c6c6; --stone-d:#565656;
    --paper:#f6f1e6; --paper-d:#e7dfcc;
    --ink:#2b2620; --muted:#6b6152;
    --gold:#b5761a;
    /* aliasy zgodne ze starymi inline-stylami podstron */
    --accent:#b0392b; --accent2:#3d7a24; --text:#2b2620; --card:#f6f1e6; --border:#000;
}
* { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { font-family:var(--body); color:var(--ink); line-height:1.6; background:var(--paper); image-rendering:pixelated; }
img { image-rendering:pixelated; }

/* ---------- HERO / blok trawy (wspólny dla wszystkich stron) ---------- */
.hero {
    position:relative; text-align:center; padding:60px 20px 78px;
    background:linear-gradient(180deg, var(--sky) 0%, var(--sky2) 100%); overflow:hidden;
}
.hero::after {
    content:""; position:absolute; left:0; right:0; bottom:0; height:46px; z-index:1;
    background:var(--dirt); border-top:12px solid var(--grass);
    box-shadow:inset 0 12px 0 var(--grass-d);
    background-image:repeating-linear-gradient(90deg, rgba(0,0,0,.06) 0 32px, transparent 32px 64px);
}
.hero > * { position:relative; z-index:2; }
.hero h1 {
    font-family:var(--pixel); font-size:clamp(1.4rem,5vw,2.6rem); line-height:1.4;
    color:#fff; text-shadow:4px 4px 0 rgba(0,0,0,.35); letter-spacing:1px;
}
.hero h1 span, .hero h1 .green { color:#c8ff9e; }
.hero p, .hero .tag {
    font-family:var(--pixel); font-size:clamp(.5rem,2vw,.72rem); color:#264a6b;
    margin-top:16px; line-height:1.7;
}
.hero .cta { margin:24px 0 6px; }
/* animowane chmury (lecą w pętli w prawo) */
.clouds { position:absolute; inset:0; overflow:hidden; z-index:1; pointer-events:none; }
.cloud { position:absolute; left:-180px; top:0; background:#fff; border-radius:4px; box-shadow:0 0 0 4px #eaf4ff; will-change:transform; }
/* opóźnienia = -(pozycja startowa 0..1 × własny czas przelotu) → równy rozstaw po całej szerokości, ciągły loop */
.cloud.c1 { width:90px;  height:26px; top:18px;  opacity:.95; animation:drift 40s linear infinite; animation-delay:0s;   }
.cloud.c2 { width:130px; height:30px; top:52px;  opacity:.9;  animation:drift 28s linear infinite; animation-delay:-3s;  }
.cloud.c3 { width:60px;  height:22px; top:92px;  opacity:.85; animation:drift 46s linear infinite; animation-delay:-12s; }
.cloud.c4 { width:110px; height:28px; top:132px; opacity:.9;  animation:drift 33s linear infinite; animation-delay:-12s; }
.cloud.c5 { width:72px;  height:22px; top:32px;  opacity:.8;  animation:drift 52s linear infinite; animation-delay:-26s; }
.cloud.c6 { width:100px; height:26px; top:110px; opacity:.85; animation:drift 30s linear infinite; animation-delay:-19s; }
.cloud.c7 { width:82px;  height:24px; top:68px;  opacity:.9;  animation:drift 43s linear infinite; animation-delay:-32s; }
.cloud.c8 { width:120px; height:30px; top:150px; opacity:.8;  animation:drift 37s linear infinite; animation-delay:-32s; }
@keyframes drift { from { transform:translateX(0); } to { transform:translateX(calc(100vw + 300px)); } }
@media (prefers-reduced-motion: reduce) { .cloud { animation:none; left:10%; } }

/* strona główna: hero z blokiem ziemi + adres IP na dircie */
.hero.home { padding:56px 0 0; }
.hero.home::after { display:none; }
.hero-content { position:relative; z-index:2; padding:0 20px; }
.ground {
    position:relative; z-index:2; margin-top:40px; padding:28px 20px 26px; text-align:center;
    background:var(--dirt); border-top:12px solid var(--grass);
    box-shadow:inset 0 12px 0 var(--grass-d);
    background-image:repeating-linear-gradient(90deg, rgba(0,0,0,.06) 0 32px, transparent 32px 64px);
}
.ip-plate {
    display:inline-flex; flex-direction:column; align-items:center; gap:8px; max-width:94vw;
    background:var(--stone); border:4px solid #000; border-radius:3px; padding:14px 22px;
    box-shadow: inset 3px 3px 0 var(--stone-l), inset -3px -3px 0 var(--stone-d), 5px 5px 0 rgba(0,0,0,.3);
}
.ip-row { display:flex; align-items:center; gap:10px; flex-wrap:wrap; justify-content:center; }
.ip-label { font-family:var(--pixel); font-size:.5rem; color:#2b2620; letter-spacing:1px; text-transform:uppercase; }
.ip-main { font-family:var(--pixel); font-size:clamp(.85rem,3.4vw,1.3rem); color:#fff; text-shadow:2px 2px 0 rgba(0,0,0,.55); cursor:pointer; word-break:break-all; }
.ip-main:hover { color:#c8ff9e; }
.ip-plate .ping { font-family:var(--pixel); font-size:.55rem; }
.ip-alt { font-size:.78rem; color:#221d17; margin-top:2px; }
.ip-alt b { font-family:var(--mono); color:#000; }
.ip-alt .ping { font-family:var(--pixel); font-size:.5rem; }
.copied { font-family:var(--pixel); font-size:.5rem; color:#c8ff9e; margin-left:6px; }
.ground-cta { margin-top:18px; }
.ip-hint { font-family:var(--pixel); font-size:.6rem; color:#f3e7d6; text-decoration:none; }
.ip-hint:hover { color:#fff; }

/* ---------- Klockowe przyciski ---------- */
.btn {
    display:inline-block; font-family:var(--pixel); font-size:.68rem; line-height:1.4;
    text-transform:uppercase; text-decoration:none; cursor:pointer;
    padding:14px 18px; color:#fff; text-shadow:2px 2px 0 rgba(0,0,0,.45);
    background:var(--stone); border:3px solid #000; border-radius:2px;
    box-shadow: inset 3px 3px 0 var(--stone-l), inset -3px -3px 0 var(--stone-d), 5px 5px 0 rgba(0,0,0,.2);
    transition:filter .1s; margin:5px;
}
.btn:hover { filter:brightness(1.12); }
.btn:active { transform:translate(3px,3px); box-shadow: inset 3px 3px 0 var(--stone-l), inset -3px -3px 0 var(--stone-d); }
.btn.green { background:var(--grass); box-shadow: inset 3px 3px 0 var(--grass-l), inset -3px -3px 0 var(--grass-d), 5px 5px 0 rgba(0,0,0,.2); }
.btn.big { font-size:.8rem; padding:18px 24px; }

/* ---------- Nawigacja (podstrony) ---------- */
.nav {
    position:sticky; top:0; z-index:50; text-align:center; padding:12px;
    background:var(--paper-d); border-bottom:3px solid #000;
}
.nav a { font-family:var(--pixel); font-size:.6rem; color:var(--grass-d); text-decoration:none; margin:0 10px; }
.nav a:hover { color:var(--ink); }

/* ---------- Górna belka nawigacyjna (wszystkie strony) ---------- */
.topbar {
    position:sticky; top:0; z-index:60;
    display:flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:10px;
    padding:10px 16px; background:var(--dirt); border-bottom:5px solid var(--grass-d);
    box-shadow:0 3px 0 rgba(0,0,0,.25);
}
.topbar .tb-logo { font-family:var(--pixel); font-size:.72rem; color:#fff; text-shadow:2px 2px 0 rgba(0,0,0,.5); text-decoration:none; }
.tb-links { display:flex; flex-wrap:wrap; gap:6px; }
.tb-links a {
    font-family:var(--pixel); font-size:.55rem; text-transform:uppercase; text-decoration:none;
    color:#fff; text-shadow:1px 1px 0 rgba(0,0,0,.5);
    background:var(--stone); border:2px solid #000; border-radius:2px;
    box-shadow: inset 2px 2px 0 var(--stone-l), inset -2px -2px 0 var(--stone-d);
    padding:9px 11px; transition:filter .1s;
}
.tb-links a:hover { filter:brightness(1.15); }
.tb-links a.active { background:var(--grass); box-shadow: inset 2px 2px 0 var(--grass-l), inset -2px -2px 0 var(--grass-d); }
@media (max-width:600px) {
    .topbar { justify-content:center; }
    .topbar .tb-logo { width:100%; text-align:center; }
    .tb-links a { font-size:.5rem; padding:8px 9px; }
    .lang-toggle { font-size:.5rem; padding:4px 6px; margin-left:6px; }
}

/* ---------- Język ---------- */
.lang-toggle {
    font-family:var(--pixel);
    font-size:.55rem; line-height:1;
    color:var(--paper-d);
    background:var(--stone);
    border:2px solid #000;
    box-shadow:inset 2px 2px 0 var(--stone-l),inset -2px -2px 0 var(--stone-d);
    padding:7px 10px;
    text-decoration:none;
    transition:filter .1s;
    margin-left:10px;
    border-radius:2px;
}
.lang-toggle:hover { filter:brightness(1.15); color:#fff; }

/* ---------- Układ ---------- */
.wrap, .container { max-width:900px; margin:0 auto; padding:48px 20px; }
.sec, .section { margin-bottom:52px; }
.sec > h2, .section h2 {
    font-family:var(--pixel); font-size:clamp(.9rem,3vw,1.3rem); color:var(--grass-d);
    line-height:1.5; margin-bottom:22px; border:none; padding:0;
}
.sec > h2 { text-align:center; }
.section h3, .card h3 { font-family:var(--pixel); font-size:.72rem; color:var(--dirt-d); margin:14px 0 10px; line-height:1.5; }

/* ---------- Klockowe karty ---------- */
.card {
    background:var(--paper); border:3px solid #000; border-radius:2px;
    box-shadow:6px 6px 0 rgba(0,0,0,.15); padding:22px 24px; margin-bottom:16px;
}
.card p { color:var(--muted); }
.card p + p { margin-top:8px; }

/* ---------- Kroki (strona główna) ---------- */
.steps { display:grid; gap:20px; }
.step { display:flex; gap:18px; align-items:flex-start; }
.step .num {
    flex-shrink:0; width:52px; height:52px; display:flex; align-items:center; justify-content:center;
    font-family:var(--pixel); font-size:1.1rem; color:#fff; text-shadow:2px 2px 0 rgba(0,0,0,.4);
    background:var(--grass); border:3px solid #000; border-radius:2px;
    box-shadow: inset 2px 2px 0 var(--grass-l), inset -2px -2px 0 var(--grass-d);
}
.step .body { flex:1; }
.step h3 { font-family:var(--pixel); font-size:.8rem; margin-bottom:8px; color:var(--ink); line-height:1.4; }
.step p { color:var(--muted); font-size:.95rem; margin-bottom:10px; }

/* ---------- Adresy ---------- */
.addr {
    display:flex; flex-wrap:wrap; align-items:center; gap:10px; justify-content:space-between;
    background:var(--paper-d); border:3px solid #000; border-radius:2px; padding:12px 16px; margin:8px 0;
}
.addr .ip { font-family:var(--pixel); font-size:.8rem; color:var(--ink); word-break:break-all; }
.addr .meta { font-size:.78rem; color:var(--muted); }
.addr .ping { font-family:var(--pixel); font-size:.6rem; }

/* ---------- Pierwsze komendy (strona główna) ---------- */
.cmds { display:grid; grid-template-columns:repeat(auto-fill,minmax(250px,1fr)); gap:12px; }
.cmd { background:var(--paper); border:3px solid #000; border-radius:2px; padding:12px 14px; box-shadow:4px 4px 0 rgba(0,0,0,.12); }
.cmd code { font-family:var(--pixel); font-size:.72rem; color:var(--grass-d); display:block; margin-bottom:6px; word-break:break-all; }
.cmd span { font-size:.85rem; color:var(--muted); }

/* ---------- Co robić ---------- */
.todo { display:grid; gap:12px; }
.todo .row { display:flex; gap:14px; align-items:center; background:var(--paper); border:3px solid #000; border-radius:2px; padding:14px 16px; box-shadow:4px 4px 0 rgba(0,0,0,.1); }
.todo .row .em { font-size:1.6rem; flex-shrink:0; }
.todo .row b { font-family:var(--pixel); font-size:.72rem; }
.todo .row p { font-size:.88rem; color:var(--muted); margin-top:4px; }

.center { text-align:center; }
.more { text-align:center; margin-top:24px; }

/* ---------- Komendy (podstrona commands) ---------- */
.cmd-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(320px,1fr)); gap:10px; }
.cmd-item {
    background:var(--paper); border:3px solid #000; border-radius:2px; padding:11px 14px;
    box-shadow:3px 3px 0 rgba(0,0,0,.1);
    display:flex; justify-content:space-between; align-items:center; gap:10px;
}
.cmd-item code { font-family:var(--mono); font-weight:700; color:var(--grass-d); font-size:.86rem; white-space:normal; word-break:break-word; }
.cmd-item .desc { font-size:.82rem; color:var(--muted); text-align:right; }
.cmd-item.important { border-color:var(--grass-d); box-shadow:3px 3px 0 rgba(78,139,42,.3); }
.cmd-item.admin { border-color:#b0392b; box-shadow:3px 3px 0 rgba(176,57,43,.25); }
.badge { font-family:var(--pixel); font-size:.5rem; padding:3px 7px; border-radius:2px; margin-left:4px; background:#b0392b; color:#fff; }
.badge-admin { background:#b0392b; color:#fff; }
.icon { width:16px; height:16px; image-rendering:pixelated; vertical-align:middle; flex-shrink:0; }

/* ---------- Resource packi (podstrona) ---------- */
.pack-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:18px; }
.pack-card {
    background:var(--paper); border:3px solid #000; border-radius:2px; overflow:hidden;
    box-shadow:6px 6px 0 rgba(0,0,0,.15); display:flex; flex-direction:column;
    transition:transform .12s;
}
.pack-card:hover { transform:translate(-2px,-2px); }
.pack-preview {
    width:100%; height:140px; display:flex; align-items:center; justify-content:center;
    font-size:2.6rem; background:linear-gradient(180deg, var(--sky), var(--sky2));
    border-bottom:3px solid #000;
}
.pack-info { padding:16px; display:flex; flex-direction:column; flex:1; }
.pack-info h3 { font-family:var(--pixel); font-size:.74rem; margin-bottom:8px; color:var(--grass-d); line-height:1.4; }
.pack-info .desc { font-size:.82rem; color:var(--muted); margin-bottom:12px; line-height:1.5; flex:1; }
.pack-info .meta { font-size:.74rem; color:var(--muted); margin-bottom:12px; font-family:var(--mono); }
.pack-info .btn { padding:10px 14px; font-size:.6rem; }
.pack-info .btn.secondary { background:var(--dirt); box-shadow: inset 3px 3px 0 #a17a54, inset -3px -3px 0 var(--dirt-d), 5px 5px 0 rgba(0,0,0,.2); }

/* ---------- Intro / kod inline ---------- */
.intro { color:var(--muted); font-size:.9rem; margin-bottom:12px; }
.intro code, .card code { background:var(--paper-d); padding:2px 7px; border:2px solid #000; border-radius:2px; font-family:var(--mono); color:var(--dirt-d); font-size:.85em; }
.section-title { font-family:var(--pixel); font-size:clamp(.9rem,3vw,1.3rem); color:var(--grass-d); margin:40px 0 20px; line-height:1.5; }

ul { list-style:none; padding:0; }
li { padding:8px 0; border-bottom:2px solid var(--paper-d); }
li:last-child { border-bottom:none; }

/* ---------- Stopka ---------- */
footer {
    background:var(--dirt); color:#f3e7d6; text-align:center; padding:36px 20px;
    border-top:12px solid var(--grass); font-size:.85rem; margin-top:20px;
}
footer .pix { font-family:var(--pixel); font-size:.6rem; color:#fff; text-shadow:2px 2px 0 rgba(0,0,0,.4); }
footer a { color:var(--gold); text-decoration:none; }

@media (max-width:520px) {
    .step { flex-direction:column; align-items:stretch; }
    .btn { display:block; text-align:center; }
    .cmd-item { flex-direction:column; align-items:flex-start; gap:4px; }
    .cmd-item .desc { text-align:left; }
}