@import url('https://fonts.googleapis.com/css2?family=Lacquer&display=swap');

*{box-sizing:border-box;}
html,body{height:100%;}
body{
  margin:0;
  background:#fff;
  color:#000;
  font-family:"Lacquer",system-ui,Segoe UI,Roboto,Arial,sans-serif;
  overflow-x:hidden;
}

/* TOP BAR */
.topbar{
  position:fixed; top:0; left:0; right:0;
  display:flex; justify-content:space-between; align-items:center;
  padding:16px 22px; z-index:10; user-select:none;
}
.topbar a,.topbar .ca{font-size:24px; color:#000; text-decoration:none;}

/* HERO */
.hero{
  min-height:72vh;
  display:grid; place-items:center;
  padding-top:60px;
  padding-bottom:26vh; /* space for mascots dock */
}
.logo-wrap{
  width:clamp(160px,22vw,320px);
  height:clamp(160px,22vw,320px);
  filter:drop-shadow(0 14px 0 rgba(0,0,0,.35));
  animation:float 3.8s ease-in-out infinite;
}
.logo-wrap img{width:100%;height:100%;image-rendering:pixelated;}
@keyframes float{
  0%{transform:translateY(0) rotate(-1.2deg);}
  50%{transform:translateY(-16px) rotate(1.6deg);}
  100%{transform:translateY(0) rotate(-1.2deg);}
}
.title{font-size:clamp(42px,6.5vw,96px); margin:18px 0 0; text-align:center;}
.ca-chip{margin-top:12px; font-size:clamp(16px,2.4vw,22px); border:3px solid #000; padding:8px 12px; border-radius:14px; background:#fff; cursor:pointer;}
.ca-chip small{opacity:.7;}
.toast{position:fixed; left:50%; bottom:24px; transform:translateX(-50%); padding:10px 14px; border:3px solid #000; background:#fff; font-size:18px; border-radius:12px; opacity:0; pointer-events:none; transition:opacity .2s ease; z-index:30;}
.toast.show{opacity:1;}

/* ==== PAINT-STYLE TERMINAL (white, hand-drawn, static, no scrollbars) ==== */
.terminal-paint{
  position:relative;
  width:min(1100px,92vw);
  min-height:clamp(240px,32vh,380px);
  margin:22px auto 0;
  background:#fff;
  border:6px solid #000;
  border-radius:20px;
  overflow:hidden;                /* no scrollbars */
  animation:jitter 4s ease-in-out infinite;
  box-shadow:0 6px 0 rgba(0,0,0,.35);
}
@keyframes jitter{ 0%,100%{transform:rotate(-0.3deg);} 50%{transform:rotate(0.3deg);} }
.paint-edge{
  pointer-events:none;
  position:absolute; inset:-4px;
  border:4px solid #000;
  border-radius:24px;
  opacity:.35;
}
.term-box, .term-typing{
  display:block;
  margin:0;
  padding:14px 16px 0 16px;
  color:#000;
  white-space:pre-wrap;
  word-break:break-word;
  font:18px/1.5 ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Courier New", monospace;
}
.term-typing{display:inline; padding-top:0;}
.cursor{
  display:inline-block;
  width:9px; height:1.2em;
  background:#000;
  margin-left:2px;
  transform:translateY(2px);
  animation:blink .7s steps(1) infinite;
}
@keyframes blink{50%{opacity:0;}}

/* MASCOTS DOCK */
.mascots{
  position:fixed; left:0; right:0; bottom:0;
  height:clamp(90px,22vh,220px);
  overflow:hidden;
  background:#fff;
  border-top:4px solid #000;
  display:flex; justify-content:center; align-items:flex-end;
  gap:22px; padding:4px 14px 0;
  z-index:8;
}
.mascots img{
  height:clamp(80px,20vh,240px);
  image-rendering:pixelated;
  transform:translateY(14%);      /* 10–20% hidden */
  animation:bob 4.2s ease-in-out infinite;
  transition:transform .08s ease;
}
.mascots img:hover{transform:translateY(10%) rotate(-2deg) scale(1.02);}
.mascots img:nth-child(2n){animation-duration:4.6s;}
.mascots img:nth-child(3n){animation-duration:3.9s;}
@keyframes bob{
  0%{transform:translateY(calc(14% + 3px));}
  50%{transform:translateY(calc(14% - 5px));}
  100%{transform:translateY(calc(14% + 3px));}
}

/* mobile */
@media (max-width:480px){
  .topbar a,.topbar .ca{font-size:20px;}
}