:root{
  --pink:#d6008f;
  --b:3px;
  --btn-r:2px;
  --window-r:16px;
}

*{ margin:0; padding:0; box-sizing:border-box; }

body{
  font-family:"Pixelify Sans", sans-serif;
  background:#51b6b6;      
  color:#000000;
  padding: 24px;         
}


.window{
  max-width: 1400px;
  margin: 0 auto;
  background:#ecad25;

  border: 3px solid #000;
  border-radius: var(--window-r);

  padding: 18px;             
}

.site-header{
  position: sticky;
  top: 24px;
  z-index: 1000;
  background: transparent;
}

.header-inner{
  background:#fff;
  border: var(--b) solid #000;
  border-radius: 14px;
  padding: 8px 12px;

  display:flex;
  align-items:center;
  gap:12px;
}

.logo-link{ display:inline-flex; align-items:center; text-decoration:none; }
.logo{ height:24px; width:auto; display:block; }

.desktop-nav{
  display:flex;
  align-items:center;
  gap:10px;
}

.window-controls{
  margin-left:auto;
  display:flex;
  align-items:center;
  gap:6px;
}

.y2k-btn,
.y2k-link{
  border:2px solid #000;
  background:#fff;
  color:#000;
  border-radius: var(--btn-r);
  box-shadow:2px 2px 0 var(--pink);
  transition: transform .08s ease, box-shadow .08s ease, background .08s ease, color .08s ease;
}

.y2k-link{
  display:inline-flex;
  align-items:center;
  padding:0.32rem 0.65rem;
  text-decoration:none;
  font-weight:700;
  font-size:.7rem;
  line-height:1;
  white-space:nowrap;
}

.y2k-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:0.32rem 0.45rem;
  font-family:"Pixelify Sans", sans-serif;
  font-weight:700;
  font-size:.7rem;
  line-height:1;
  cursor:pointer;
}

.y2k-btn:hover,
.y2k-link:hover{ background:#eaeaea; }

.y2k-btn.close:hover{ background:#ff4d4d; color:#fff; }

.y2k-btn:active,
.y2k-link:active{
  transform: translate(1px,1px);
  box-shadow:1px 1px 0 var(--pink);
}

.main-wrap{ margin-top: 18px; }
.footer-wrap{ margin-top: 18px; }

/* MOBILE  */
.mobile-nav,
.mobile-overlay{ display:none; }

@media (max-width:600px){
  body{ padding: 14px; }
  .window{ padding: 12px; border-radius: 14px; }

  .desktop-nav{ display:none; }
  .window-controls .minimize,
  .window-controls .close{ display:none; }

  .mobile-nav{
    display:flex;
    position:fixed;
    top:0;
    right:-80vw;
    width:80vw;
    height:100vh;
    background:#fff;
    border-left: var(--b) solid #000;
    padding:16px;
    flex-direction:column;
    z-index:2000;
    transition:right .25s ease;
  }
  .mobile-nav.open{ right:0; }

  .mobile-nav a{
    padding:0.9rem 0.6rem;
    border-bottom:2px solid #000;
    text-decoration:none;
    color:#000;
    font-size:.9rem;
  }

  .mobile-nav a:hover{ background:#000; color:#fff; }

  .mobile-overlay{
    position:fixed;
    inset:0;
    background: rgba(0,0,0,.12);
    display:none;
    z-index:1500;
  }
  .mobile-overlay.open{ display:block; }
}

body.minimized main,
body.minimized footer{ display:none; }

.closed-screen{
  display:none;
  border: var(--b) solid #000;
  border-radius: 14px;
  padding:16px;
  margin-top:18px;
}

body.closed .mobile-nav,
body.closed .mobile-overlay,
body.closed header,
body.closed main,
body.closed footer{ display:none !important; }

body.closed .closed-screen{ display:block; }

.toast{
  position:fixed;
  bottom:20px;
  left:20px;
  border: var(--b) solid #000000;
  border-radius: 12px;
  background:#ffffff;
  padding:10px 12px;
  font-size:.85rem;
  box-shadow:2px 2px 0 var(--pink);
  display:none;
  z-index:5000;
}
.toast.show{ display:block; }