/* =============================================================
   Psychopatyczny Minecraft (minecraft.psychopaci.xyz)
   Nowa szata graficzna – futurystyczny minimal brutal + voxel tech
   Całkowicie nowy CSS – brak zależności od starej wersji/lightcraft
   Autor: redesign AI helper
   ============================================================= */

/* RESET */
* { box-sizing: border-box; margin:0; padding:0; }
html,body { height:100%; }
body {
    font-family: 'JetBrains Mono', 'Press Start 2P', monospace;
    background:#071017;
    color:#e2f5ff;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    overflow-x:hidden;
}

/* Layered animated gradient via canvas (fallback) */
body::after{
    content:"";position:fixed;inset:0;pointer-events:none;mix-blend-mode:overlay;
    background:radial-gradient(circle at 20% 30%,rgba(0,220,255,.07),transparent 60%),
              radial-gradient(circle at 80% 70%,rgba(0,180,130,.08),transparent 65%),
              repeating-linear-gradient(135deg,rgba(255,255,255,.04)0 2px,transparent 2px 6px);
    animation:grain 8s steps(10) infinite;
}
@keyframes grain { 0%,100%{transform:translate(0,0);} 10%{transform:translate(-1%,1%);} 20%{transform:translate(1%, -1%);} 30%{transform:translate(0.5%,1.2%);} 40%{transform:translate(-1.2%,0.5%);} 50%{transform:translate(1%,1%);} 60%{transform:translate(-0.5%,0.2%);} 70%{transform:translate(0.3%,-0.3%);} 80%{transform:translate(-0.7%,0.6%);} 90%{transform:translate(0.4%, -0.4%);} }

canvas#background-canvas { position:fixed; inset:0; width:100%; height:100%; z-index:-2; background:linear-gradient(120deg,#06141f,#041c26,#05222c); }

.page-frame { max-width:1500px; margin:0 auto; padding:clamp(1rem,2.2vw,2.5rem); display:flex; flex-direction:column; min-height:100dvh; gap:4rem; }

/* HEADER */
.site-header { display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between; gap:2rem; position:relative; }
.brand-block { position:relative; }
.brand { font-family:'Press Start 2P', monospace; font-size:clamp(1.6rem,3vw,3.2rem); line-height:1.1; background:linear-gradient(90deg,#3af2ff,#7fffd4,#3af2ff); -webkit-background-clip:text; background-clip:text; color:transparent; filter:drop-shadow(0 0 8px rgba(60,220,255,.35)); letter-spacing:1px; cursor:pointer; transition:.4s; }
.brand span { color:#7fffd4; text-shadow:0 0 12px rgba(127,255,212,.5); }
.brand:hover { transform:translateY(-4px) scale(1.02); filter:drop-shadow(0 0 14px rgba(90,240,255,.55)); }
.tagline { margin-top:.75rem; font-size:.8rem; font-weight:500; letter-spacing:.5px; color:#7ecfe4; min-height:1.4em; }

.primary-nav { display:flex; gap:.75rem; flex-wrap:wrap; }
.nav-pill { all:unset; cursor:pointer; position:relative; font-size:.65rem; padding:.9rem 1.1rem; font-family:'Press Start 2P'; letter-spacing:1px; background:linear-gradient(150deg,#0d2d38,#08303b); border:1px solid #114b5f; color:#bdefff; border-radius:900px; box-shadow:0 0 0 0 rgba(0,255,255,0); transition:.35s; }
.nav-pill:before { content:""; position:absolute; inset:0; border-radius:inherit; padding:1px; background:linear-gradient(120deg,#29d3ff,#00ffa3,#29d3ff); -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite:exclude; opacity:0; transition:.4s; }
.nav-pill:hover { color:#fff; box-shadow:0 0 0 3px rgba(0,255,200,.15),0 6px 18px -4px rgba(0,255,200,.35); }
.nav-pill:hover:before { opacity:1; }

/* HERO */
.hero { display:grid; grid-template-columns:clamp(280px,40%,520px) 1fr; gap:clamp(2rem,5vw,5rem); align-items:center; position:relative; padding-top:1rem; }
/* Cube logo overlay on every face */
@keyframes logoPulse { 0%,100%{opacity:.55; transform:scale(.965);} 50%{opacity:.9; transform:scale(1.035);} }
@media (max-width: 990px){ .hero { grid-template-columns:1fr; } }

.holo-grid { perspective:1400px; width:100%; aspect-ratio:1/1; display:grid; place-items:center; position:relative; }
/* Cube enlarged by 20% */
.cube { position:relative; width:264px; height:264px; transform-style:preserve-3d; animation:spin 14s linear infinite; filter:drop-shadow(0 18px 24px rgba(0,255,200,.06)); }
@media (max-width:600px){ .cube { width:192px; height:192px; } }
/* Faces with reduced inner glow (40% less) */
.cube .face { position:absolute; inset:0; display:block; background:linear-gradient(170deg,#062630,#0f3f49); border:2px solid #1affd5; box-shadow:0 0 0 1px rgba(0,255,210,.35), 0 0 13px -2px rgba(0,220,200,.27) inset; overflow:hidden; }
/* Logo scaled near border & reduced glow */
.cube .face:after { content:""; position:absolute; inset:0; background:url('../images/320.png') center/96% no-repeat; opacity:.8; mix-blend-mode:screen; filter:drop-shadow(0 0 16px rgba(0,255,210,.33)); animation:logoPulse 5.5s ease-in-out infinite; }
/* 3D positioning updated to new half-size (132px desktop, 96px mobile) */
.f-front { transform:translateZ(132px); }
.f-back { transform:rotateY(180deg) translateZ(132px); }
.f-right { transform:rotateY(90deg) translateZ(132px); }
.f-left { transform:rotateY(-90deg) translateZ(132px); }
.f-top { transform:rotateX(90deg) translateZ(132px); }
.f-bottom { transform:rotateX(-90deg) translateZ(132px); }
@media (max-width:600px){
    .f-front { transform:translateZ(96px); }
    .f-back { transform:rotateY(180deg) translateZ(96px); }
    .f-right { transform:rotateY(90deg) translateZ(96px); }
    .f-left { transform:rotateY(-90deg) translateZ(96px); }
    .f-top { transform:rotateX(90deg) translateZ(96px); }
    .f-bottom { transform:rotateX(-90deg) translateZ(96px); }
}
@keyframes spin { 0%{ transform:rotateX(18deg) rotateY(0deg); } 50%{ transform:rotateX(18deg) rotateY(180deg);} 100%{ transform:rotateX(18deg) rotateY(360deg);} }

.hero-content { position:relative; display:flex; flex-direction:column; gap:1.35rem; }
.badge-line { display:flex; flex-wrap:wrap; gap:.6rem; }
.badge { font-size:.55rem; padding:.55rem .7rem .5rem; border:1px solid #1d6572; background:linear-gradient(140deg,#0c2a33,#07323b); letter-spacing:.5px; color:#b6efff; border-radius:4px; position:relative; overflow:hidden; text-transform:uppercase; font-family:'Press Start 2P'; }
.badge.version { border-color:#29d3ff; color:#8be9ff; }
.badge.engine { border-color:#00ffa3; color:#7fffd4; }
.badge.vanilla { border-color:#ffc93c; color:#ffe9a4; }

.hero-head { font:600 clamp(1.2rem,2.6vw,2.2rem) 'JetBrains Mono'; line-height:1.25; background:linear-gradient(90deg,#e2f5ff,#9fffe2); -webkit-background-clip:text; background-clip:text; color:transparent; filter:drop-shadow(0 4px 12px rgba(0,255,210,.15)); }
.hero-sub { font-size:.95rem; max-width:50ch; color:#a3d9eb; line-height:1.55; }

.ip-box { display:flex; gap:.6rem; flex-wrap:wrap; align-items:stretch; background:linear-gradient(140deg,#08242d,#041a20); padding:.8rem 1rem; border:1px solid #104754; border-radius:12px; position:relative; }
.ip-box input { background:#031217; border:1px solid #123d48; padding:.65rem .9rem; font:600 .85rem 'JetBrains Mono'; color:#7fffd4; border-radius:8px; min-width:250px; letter-spacing:.5px; outline:none; transition:.3s; }
.ip-box input:focus { border-color:#00ffa3; box-shadow:0 0 0 2px rgba(0,255,163,.2); }

.btn { --btn-bg:#0d2d37; --btn-border:#1b5460; position:relative; font:600 .68rem 'Press Start 2P'; letter-spacing:1px; padding:1rem 1.4rem .9rem; border:1px solid var(--btn-border); background:linear-gradient(160deg,var(--btn-bg),#071b20); color:#c9f6ff; border-radius:10px; cursor:pointer; text-decoration:none; text-align:center; overflow:hidden; transition:.35s; display:inline-flex; align-items:center; justify-content:center; gap:.4rem; }
.btn:before { content:""; position:absolute; inset:0; background:radial-gradient(circle at 20% 15%,rgba(255,255,255,.14),transparent 60%); opacity:0; mix-blend-mode:overlay; transition:.5s; }
.btn:hover { color:#fff; transform:translateY(-3px); box-shadow:0 8px 26px -8px rgba(0,255,210,.35),0 0 0 1px rgba(0,255,210,.25); }
.btn:hover:before { opacity:1; }
.btn:active { transform:translateY(0); filter:brightness(.9); }
.btn.primary { --btn-bg:#00656e; --btn-border:#00b7c9; background:linear-gradient(160deg,#008c99,#00525c); box-shadow:0 4px 18px -4px rgba(0,255,255,.35); }
.btn.alt { --btn-bg:#314409; --btn-border:#6fa91d; background:linear-gradient(160deg,#6fa91d,#2c3c08); }
.btn.outline { background:transparent; border:1px dashed #2b6978; color:#8be7ff; }
.btn.action { --btn-bg:#083e33; --btn-border:#0ea887; }
.btn.ghost { background:#041114; color:#5db8c6; }

.status-line { font:600 .65rem 'JetBrains Mono'; color:#66ffe1; letter-spacing:.5px; min-height:1.2em; }
.hidden-prelaunch { display:none !important; }
.prelaunch.revealed { animation:fadeIn .8s ease; }
.panel.revealed { animation:fadeIn .9s ease; }
.pre-msg { font:600 .7rem 'JetBrains Mono'; background:#08242d; border:1px dashed #15515d; color:#7fe9ff; padding:.9rem 1.1rem; border-radius:12px; letter-spacing:.5px; margin-bottom:1rem; }
#preTime { color:#fff; }

.cta-row { display:flex; flex-wrap:wrap; gap:.8rem; margin-top:.4rem; }

/* PANELS */
.panel { position:relative; margin-top:4rem; background:linear-gradient(180deg,#08181e,#062027); border:1px solid #123c47; border-radius:22px; padding:clamp(1.5rem,2.4vw,3rem); box-shadow:0 10px 50px -25px rgba(0,0,0,.5), 0 0 0 1px rgba(0,200,200,.08); backdrop-filter:blur(8px) saturate(140%); overflow:hidden; }
.panel:before { content:""; position:absolute; inset:0; background:radial-gradient(circle at 75% 15%,rgba(0,220,255,.12),transparent 60%), radial-gradient(circle at 10% 85%,rgba(0,200,160,.15),transparent 65%); mix-blend-mode:overlay; opacity:.55; pointer-events:none; }
.panel-title { font:700 clamp(.9rem,1.4vw,1.2rem) 'Press Start 2P'; letter-spacing:1px; margin-bottom:1.8rem; background:linear-gradient(90deg,#7fffd4,#94f8ff); -webkit-background-clip:text; background-clip:text; color:transparent; filter:drop-shadow(0 2px 8px rgba(0,255,210,.25)); position:relative; }

/* CONTENT SECTION */
.content-grid { display:grid; gap:1.2rem; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); margin-bottom:2.2rem; }
.content-item { background:#0b2026; border:1px solid #184a55; padding:1rem .9rem 1.1rem; border-radius:16px; position:relative; overflow:hidden; display:flex; flex-direction:column; gap:.55rem; transition:.35s; min-height:160px; }
.content-item:before { content:""; position:absolute; inset:0; background:linear-gradient(130deg,rgba(0,255,210,.1),transparent 60%); opacity:0; transition:.5s; }
.content-item:hover { border-color:#23c7d5; transform:translateY(-6px); box-shadow:0 14px 42px -16px rgba(0,255,210,.4),0 4px 20px -6px rgba(0,255,210,.25); }
.content-item:hover:before { opacity:1; }
.content-item h4 { font:600 .75rem 'JetBrains Mono'; letter-spacing:.5px; color:#8dfcff; text-transform:uppercase; }
.content-item p { font-size:.7rem; line-height:1.4; color:#b6e8f3; }

.sub-section { margin-top:1.2rem; }
.mini-title { font:600 .7rem 'Press Start 2P'; letter-spacing:1px; margin:0 0 1rem; color:#89f6ff; text-transform:uppercase; }
.timeline { list-style:none; display:flex; flex-direction:column; gap:.85rem; margin:0 0 1.2rem; position:relative; }
.timeline:before { content:""; position:absolute; left:10px; top:.3rem; bottom:.3rem; width:2px; background:linear-gradient(#00e5ff,#00ffa3); opacity:.35; }
.tl { position:relative; --date-width:4.6rem; padding:.55rem .8rem .55rem calc(var(--date-width) + 1.9rem); background:#0a1e24; border:1px solid #16454f; border-radius:12px; font-size:.65rem; line-height:1.35; color:#bceefb; display:flex; align-items:center; gap:.9rem; transition:.35s; }
.tl .date { position:absolute; left:.9rem; top:50%; transform:translateY(-50%); font:600 .55rem 'Press Start 2P'; background:#08313a; color:#7fffd4; padding:.3rem .55rem .25rem; border:1px solid #1c5c68; border-radius:6px; letter-spacing:.5px; width:var(--date-width); min-width:var(--date-width); box-sizing:border-box; text-align:center; }
.tl.active { border-color:#23d6ff; background:#0d2a32; box-shadow:0 0 0 1px rgba(0,255,210,.25),0 8px 26px -12px rgba(0,255,210,.35); }
.tl.future { opacity:.75; }
.tl:hover { border-color:#23c7d5; background:#11313a; }
.tl-body { flex:1; }

@media (max-width:780px){
    .timeline:before { left:8px; }
    .tl { --date-width:4.4rem; padding-left:calc(var(--date-width) + 1.6rem); }
    .tl .date { left:.7rem; }
}

/* FEATURES GRID */
.feature-grid { display:grid; gap:1.5rem; grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); }
.feature { background:#0a1f25; border:1px solid #164750; border-radius:14px; padding:1.1rem 1rem 1rem; position:relative; min-height:150px; display:flex; flex-direction:column; gap:.6rem; transition:.4s; overflow:hidden; }
.feature:before { content:""; position:absolute; inset:0; background:linear-gradient(140deg,rgba(0,255,200,.08),transparent 55%); opacity:0; transition:.5s; }
.feature:hover { border-color:#23c7d5; transform:translateY(-6px); box-shadow:0 14px 40px -18px rgba(0,255,210,.4),0 4px 18px -6px rgba(0,255,210,.25); }
.feature:hover:before { opacity:1; }
.feature h4 { font:600 .85rem 'JetBrains Mono'; color:#86f9ff; letter-spacing:.5px; text-transform:uppercase; }
.feature p { font-size:.75rem; line-height:1.4; color:#b7e9f1; }

/* WHY / LIST */
.reasons { list-style:none; display:grid; gap:.9rem; font-size:.8rem; line-height:1.45; }
.reasons li { background:#091c22; border:1px solid #153c45; padding:.85rem 1rem; border-radius:12px; display:flex; gap:.7rem; align-items:flex-start; position:relative; transition:.35s; }
.reasons li span { font-size:1rem; filter:drop-shadow(0 0 6px rgba(0,255,210,.4)); }
.reasons li:hover { border-color:#1bc1cd; background:#0d2730; transform:translateX(4px); }

/* CONNECT */
.steps { counter-reset:step; display:grid; gap:1rem; list-style:none; font-size:.78rem; }
.steps li { position:relative; padding:1rem 1rem 1rem 3.2rem; background:#0a1d22; border:1px solid #154954; border-radius:14px; line-height:1.5; color:#b9edf7; transition:.4s; }
.steps li:before { counter-increment:step; content:counter(step); position:absolute; left:1rem; top:50%; translate:0 -50%; width:2rem; height:2rem; display:grid; place-items:center; background:linear-gradient(135deg,#00b7c9,#008199); border:1px solid #23d6ff; font:.8rem 'Press Start 2P'; color:#fff; border-radius:10px; box-shadow:0 4px 14px -4px rgba(0,255,255,.4); }
.steps li:hover { border-color:#23d6ff; background:#0d2a32; }
.steps strong { color:#fff; }
.steps code { font-family:'JetBrains Mono'; font-size:.75rem; background:#052229; padding:.2rem .35rem; border-radius:6px; border:1px solid #0d5969; color:#8bf6ff; }
.note { margin-top:1.4rem; font-size:.7rem; color:#9cd9e7; max-width:60ch; }

/* FOOTER */
.site-footer { margin-top:auto; padding:2rem 0 1rem; display:flex; flex-direction:column; gap:.8rem; font-size:.6rem; letter-spacing:1px; opacity:.85; text-align:center; }
.foot-links { display:flex; gap:1.2rem; justify-content:center; }
.foot-links a { color:#7eefff; text-decoration:none; position:relative; font:600 .6rem 'Press Start 2P'; }
.foot-links a:after { content:""; position:absolute; left:0; bottom:-3px; width:0; height:2px; background:#7fffd4; transition:.4s; }
.foot-links a:hover:after { width:100%; }
.heart { color:#ff3d7f; filter:drop-shadow(0 0 6px rgba(255,0,90,.6)); }

.nojs { position:fixed; inset:auto 0 0 0; background:#082028; color:#8bf6ff; font:.65rem 'JetBrains Mono'; padding:1rem; text-align:center; letter-spacing:.5px; }
.visually-hidden { position:absolute !important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); border:0; }

/* UTIL ANIMATIONS */
@keyframes fadeIn { from{opacity:0; transform:translateY(6px);} to{opacity:1; transform:translateY(0);} }
@keyframes pop { 0%{transform:translateY(18px) scale(.9); opacity:0;} 100%{transform:translateY(0) scale(1); opacity:1;} }

/* ADAPTIVE */
@media (max-width:720px){
    .panel { padding:1.8rem 1.2rem 2rem; }
    .hero-head { font-size:1.4rem; }
    .ip-box { flex-direction:column; align-items:stretch; }
    .ip-box input, .ip-box .btn { width:100%; }
    .brand { font-size:2.2rem; }
}

@media (max-width:480px){
    .feature-grid { grid-template-columns:1fr; }
    .hero { gap:2.5rem; }
    .cta-row { flex-direction:column; }
}

/* LIGHT EFFECTS (dynamic) */
.glow-pulse { animation:glow 3.8s ease-in-out infinite; }
@keyframes glow { 0%,100%{filter:drop-shadow(0 0 6px rgba(0,255,210,.3));} 50%{filter:drop-shadow(0 0 26px rgba(0,255,210,.65));} }

/* Selection */
::selection { background:#00ffd5; color:#062229; }

/* Reduced motion */
@media (prefers-reduced-motion:reduce){
    * { animation-duration:.001s !important; animation-iteration-count:1 !important; transition:none !important; }
}
    
    .btn {
.info-card:hover, .status-card:hover {
    border-color: #32CD32;
    box-shadow: 
        0 10px 30px rgba(0,0,0,0.4),
        inset 0 1px 0 rgba(255,255,255,0.1),
        0 0 30px rgba(50,205,50,0.2);
}

.rebuild-card:hover {
    border-color: #32CD32;
    box-shadow: 
        0 10px 30px rgba(0,0,0,0.4),
        inset 0 1px 0 rgba(255,255,255,0.1),
        0 0 30px rgba(255,215,0,0.2);
}

/* Dodatkowe animacje */
@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.7; }
}

.logo.pulse {
    animation: pulse 1s ease-in-out infinite;
}

/* Efekt cząsteczek w tle */
.floating-particle {
    position: fixed;
    pointer-events: none;
    z-index: -1;
    border-radius: 50%;
    opacity: 0.6;
}

/* Animacje dla easter egg */
@keyframes rainbow {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

@keyframes fadeOut {
    from {
        opacity: 1;
        transform: scale(1);
    }
    to {
        opacity: 0;
        transform: scale(0.8);
    }
}

/* Efekt ripple dla przycisków */
@keyframes ripple {
    to {
        transform: scale(2);
        opacity: 0;
    }
}

/* Dodatkowe style dla wiadomości */
.message-notification {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 10000;
    border-radius: 10px;
    font-family: 'Press Start 2P', cursive;
    box-shadow: 0 6px 20px rgba(0,0,0,0.4);
}

/* Animacje dla wiadomości */
@keyframes slideIn {
    from {
        transform: translateX(100%);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

@keyframes slideOut {
    from {
        transform: translateX(0);
        opacity: 1;
    }
    to {
        transform: translateX(100%);
        opacity: 0;
    }
}

/* Efekt dla scrollbar */
::-webkit-scrollbar {
    width: 12px;
}

::-webkit-scrollbar-track {
    background: rgba(0,0,0,0.3);
    border-radius: 6px;
}

::-webkit-scrollbar-thumb {
    background: linear-gradient(45deg, #228B22, #32CD32);
    border-radius: 6px;
    border: 2px solid rgba(0,0,0,0.3);
}

::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(45deg, #32CD32, #00FF7F);
}

/* Dodatkowe efekty hover dla elementów */
.subtitle:hover {
    color: #FFD700;
    text-shadow: 2px 2px 8px rgba(255,215,0,0.5);
    transition: all 0.3s ease;
}

/* Efekt dla aktywnych elementów */
.btn:focus {
    outline: 3px solid rgba(50,205,50,0.5);
    outline-offset: 2px;
}

/* Animacja ładowania */
@keyframes loading {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.loading-spinner {
    border: 3px solid rgba(50,205,50,0.3);
    border-top: 3px solid #32CD32;
    border-radius: 50%;
    width: 30px;
    height: 30px;
    animation: loading 1s linear infinite;
    margin: 0 auto;
}

/* Efekty dla różnych stanów */
.btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none !important;
    box-shadow: 0 4px 0 rgba(0,0,0,0.2) !important;
}

/* Dodatkowe style dla lepszej dostępności */
@media (prefers-reduced-motion: reduce) {
    * {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* Wysokie kontrasty */
@media (prefers-contrast: high) {
    .logo {
        -webkit-text-fill-color: #00FF00;
        text-shadow: 2px 2px 0 #000000;
    }
    
    .btn {
        border-width: 4px;
    }
    
    .info-card, .status-card, .rebuild-card {
        border-width: 4px;
    }
}

/* Tryb ciemny */
@media (prefers-color-scheme: dark) {
    body {
        background: linear-gradient(135deg, #0a1f0a, #1a3d1a, #0d2d0d, #2d5a2d);
    }
}

/* Finalne poprawki */
.container {
    position: relative;
    z-index: 1;
}

/* Koniec pliku CSS */