:root{
  --accent:#f4a261;
  --accent-hover:#ffa500;
  --bg:#0c0c0f;
  --card:#141418;
  --border:#1f1f26;
  --btn:#222;
  --btn-hover:#444;
  --transition:.3s ease;
}

body{
  margin:0;
  /*font-family:monospace;*/
  font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  background:var(--bg);
  color:white;
  overflow-x:hidden;
  scroll-behavior:smooth;
}

#bgCanvas{
  position:fixed;
  inset:0;
  z-index:-1;
}

.container{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:28px;
  text-align:center;
  padding:140px 20px 100px;
  max-width:900px;
  margin:auto;
}

.title{
  font-size:48px;
  letter-spacing:1px;
  white-space:nowrap;
  border-right:2px solid var(--accent);
  overflow:hidden;
  margin:0;
  animation:blink 1s step-end infinite;
}

.title.typed-done{
  border-right:none;
}

.tagline{
  opacity:.7;
  margin-top:-6px;
  font-size:20px;
}

#memeText{
  font-size:24px;
  opacity:.85;
  transition:opacity .35s ease, transform .35s ease;
  will-change:transform,opacity;
}

.shiba{
  width:120px;
  cursor:pointer;
  animation:shiba-breath 3s ease-in-out infinite;
  user-select:none;
  -webkit-user-drag:none;
}

@keyframes blink{
  0%,50%,100%{border-color:var(--accent);}
  25%,75%{border-color:transparent;}
}

@keyframes shiba-breath{
  0%,100%{transform:translateY(0);}
  50%{transform:translateY(-4px);}
}

@keyframes paw-float{
  0%{transform:translateY(0) scale(1);opacity:1;}
  100%{transform:translateY(-60px) scale(.5);opacity:0;}
}

@keyframes scroll-bounce{
  0%,100%{transform:translateY(0);}
  50%{transform:translateY(-4px);}
}

.scroll-buttons{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
}

.scroll-btn{
  padding:12px 26px;
  font-size:18px;
  cursor:pointer;
  background:var(--btn);
  border:none;
  border-radius:8px;
  color:white;
  transition:var(--transition);
  animation:scroll-bounce 2s infinite;
}

.scroll-btn:hover{
  background:var(--btn-hover);
  box-shadow:0 0 10px #f4a26133;
}

#projects{
  padding:100px 20px;
  max-width:1000px;
  margin:auto;
}

#projects h2{
  font-size:36px;
  text-align:center;
  margin-bottom:50px;
  letter-spacing:1px;
}

.project-list{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
  gap:16px;
}

.project-card,
.mod-item{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:14px;
  padding:18px;
  opacity:0;
  transform:translateY(20px);
  transition:
    transform .3s ease,
    box-shadow .3s ease,
    border-color .3s ease,
    opacity .5s ease;
}

.project-card.visible,
.mod-item.visible{
  opacity:1;
  transform:translateY(0);
}

.project-card:hover,
.mod-item:hover{
  transform:translateY(-6px);
  border-color:#f4a26155;
  box-shadow:
    0 6px 20px rgba(0,0,0,.6),
    0 0 12px #f4a26122;
}

.project-card h3,
.mod-info h3{
  font-size:18px;
  margin:0 0 6px;
}

.project-card p,
.mod-info p{
  font-size:13px;
  opacity:.8;
  margin:0 0 12px;
}

.project-card a{
  font-size:13px;
  font-weight:bold;
  color:var(--accent);
  text-decoration:none;
  transition:.25s;
}

.project-card a:hover{
  color:var(--accent-hover);
}

.project-card a::after{
  content:" →";
  transition:.2s;
}

#mods{
  padding:100px 20px;
  max-width:800px;
  margin:auto;
}

#mods h2{
  font-size:36px;
  text-align:center;
  margin-bottom:20px;
}

.mod-list-wrapper{
  position:relative;
  max-width:800px;
  margin:auto;
  min-height:380px;
}

.mod-list{
  display:flex;
  flex-direction:column;
  gap:16px;
  transition:.35s ease;
}

.mod-item{
  display:flex;
  justify-content:space-between;
  align-items:center;
  transform:translateY(-10px);
  pointer-events:none;
}

.mod-item.empty{
  display:flex;
  justify-content:center;
  align-items:center;
  font-style:italic;
  color:#f4a261aa;
  background:#111;
  opacity:1;
  transform:none;
  pointer-events:none;
}

.download-btn{
  background:var(--accent);
  color:#111;
  padding:6px 14px;
  border-radius:8px;
  font-weight:bold;
  text-decoration:none;
  transition:var(--transition);
}

.download-btn:hover{
  background:var(--accent-hover);
}

.download-btn[data-tooltip]{position:relative}

.download-btn[data-tooltip]:hover::after{
  content:attr(data-tooltip);
  position:absolute;
  bottom:120%;
  left:50%;
  transform:translateX(-50%);
  background:#222;
  color:var(--accent);
  font-size:12px;
  font-weight:bold;
  padding:4px 8px;
  border-radius:6px;
  white-space:nowrap;
  box-shadow:0 2px 8px rgba(0,0,0,.5);
}

.filter-buttons{
  display:flex;
  justify-content:center;
  gap:12px;
  margin-bottom:24px;
  flex-wrap:wrap;
}

.filter-btn{
  padding:8px 18px;
  border:none;
  border-radius:20px;
  background:var(--btn);
  color:white;
  font-weight:bold;
  cursor:pointer;
  transition:var(--transition);
}

.filter-btn:hover{
  background:var(--btn-hover);
}

.filter-btn.active{
  background:var(--accent);
  color:#111;
}

.mod-pagination{
  display:flex;
  justify-content:center;
  gap:8px;
  margin-top:12px;
  flex-wrap:wrap;
}

.mod-pagination button{
  background:var(--btn);
  color:white;
  border:none;
  padding:6px 12px;
  border-radius:6px;
  cursor:pointer;
  transition:var(--transition);
}

.mod-pagination button:hover{
  background:var(--btn-hover);
}

.mod-pagination button.active{
  background:var(--accent);
  color:#111;
  font-weight:bold;
}

.mod-pagination button:disabled{
  opacity:.5;
  cursor:not-allowed;
}

#backToTop{
  position:fixed;
  bottom:100px;
  right:28px;
  background:var(--btn);
  color:white;
  font-size:28px;
  border:none;
  border-radius:50%;
  width:56px;
  height:56px;
  cursor:pointer;
  opacity:0;
  pointer-events:none;
  transition:var(--transition);
  box-shadow:0 4px 12px rgba(0,0,0,.3);
  z-index:999;
}

#backToTop.show{
  opacity:1;
  pointer-events:auto;
}

#backToTop:hover{
  background:var(--btn-hover);
  transform:translateY(-4px) scale(1.1);
}

.toggle{
  position:fixed;
  bottom:28px;
  right:28px;
  display:flex;
  align-items:center;
  gap:10px;
  font-size:13px;
  opacity:.75;
  transition:.25s;
}

.toggle:hover{
  opacity:1;
}

.switch{
  position:relative;
  width:42px;
  height:22px;
}

.switch input{
  opacity:0;
  width:0;
  height:0;
}

.slider{
  position:absolute;
  inset:0;
  background:#222;
  border-radius:30px;
  cursor:pointer;
  transition:.35s;
  box-shadow:0 0 0 1px #333 inset;
}

.slider:before{
  content:"";
  position:absolute;
  height:18px;
  width:18px;
  left:2px;
  top:2px;
  background:#fff;
  border-radius:50%;
  transition:.35s;
}

input:checked + .slider{
  background:#444;
  box-shadow:0 0 8px #ffffff22;
}

input:checked + .slider:before{
  transform:translateX(20px);
}

.paw{
  position:absolute;
  font-size:18px;
  pointer-events:none;
  animation:paw-float 1.2s ease-out forwards;
  will-change:transform,opacity;
}

footer{
  text-align:center;
  padding:24px 20px;
  font-size:14px;
  opacity:.75;
}

footer a{
  color:var(--accent);
  text-decoration:none;
  margin:0 6px;
  font-weight:bold;
  transition:.3s;
}

footer a:hover{
  color:var(--accent-hover);
}

@media(max-width:500px){

  .title{font-size:36px;}

  .shiba{width:90px;}

  #memeText{font-size:20px;}

  .scroll-btn{
    font-size:16px;
    padding:10px 20px;
  }

}