/* ============================================================
   GENUARY // Y2K · VAPORWAVE
   Antoine Brachet — IIM B3
   ============================================================ */

:root{
  --bg:#16002e;
  --ink:#f5e9ff;
  --pink:#ff71ce;
  --cyan:#01cdfe;
  --green:#05ffa1;
  --purple:#b967ff;
  --yellow:#fffb96;
  --grid:rgba(255,113,206,.18);
  --sans:"Trebuchet MS", "Segoe UI", Verdana, sans-serif;
}

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

html,body{min-height:100%;color:var(--ink);font-family:var(--sans)}

/* vaporwave sunset + retro perspective grid */
body{
  background:
    linear-gradient(180deg, rgba(22,0,46,.4) 0%, rgba(22,0,46,.7) 55%, rgba(22,0,46,.95) 100%),
    linear-gradient(180deg, #2b0a4a 0%, #5a1c8f 35%, #c43d9e 70%, #ff8a5c 100%);
  background-attachment:fixed;
}
/* glowing grid floor */
body::before{
  content:"";position:fixed;left:0;right:0;bottom:0;height:45vh;z-index:-1;pointer-events:none;
  background-image:
    linear-gradient(var(--grid) 2px, transparent 2px),
    linear-gradient(90deg, var(--grid) 2px, transparent 2px);
  background-size:40px 40px;
  transform:perspective(280px) rotateX(62deg);
  transform-origin:bottom;
  opacity:.7;
}

a{color:var(--cyan);text-decoration:none;border-bottom:1px dotted var(--cyan)}
a:hover{color:var(--pink);border-color:var(--pink)}

/* ---------- HEADER / SPLASH ---------- */
.splash{padding:30px 18px 34px;text-align:center;position:relative}
.kicker{
  color:var(--cyan);letter-spacing:.5em;font-size:12px;text-transform:uppercase;
  text-shadow:0 0 8px var(--cyan);
}
.title{
  font-size:clamp(46px,13vw,160px);
  line-height:.9;font-weight:900;font-style:italic;letter-spacing:.02em;
  background:linear-gradient(180deg,#ffffff 0%,var(--cyan) 40%,var(--pink) 70%,var(--purple) 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  -webkit-text-stroke:1px rgba(255,255,255,.35);
  filter:drop-shadow(3px 3px 0 var(--purple)) drop-shadow(-2px -2px 0 var(--cyan));
}
.subtitle{
  margin:14px auto 0;max-width:760px;font-size:15px;line-height:1.6;
  background:rgba(22,0,46,.5);padding:12px 16px;border:1px solid var(--grid);border-radius:10px;
}
.subtitle b{color:var(--yellow)}
.meta-bar{margin-top:18px;display:flex;flex-wrap:wrap;gap:10px;justify-content:center;font-size:12px}
.tag{
  border:1px solid rgba(255,255,255,.25);
  background:rgba(255,255,255,.06);backdrop-filter:blur(4px);
  padding:7px 12px;border-radius:20px;color:var(--ink);
}
.tag b{color:var(--cyan)}

/* marquee */
.marquee{
  margin-top:22px;overflow:hidden;white-space:nowrap;
  background:rgba(255,255,255,.08);border-top:1px solid var(--grid);border-bottom:1px solid var(--grid);
  font-size:13px;color:var(--yellow);padding:8px 0;letter-spacing:.25em;
}
.marquee span{display:inline-block;padding-left:100%;animation:scroll 22s linear infinite}
@keyframes scroll{to{transform:translateX(-100%)}}

/* ---------- GALLERY ---------- */
.section-head{
  padding:26px 18px 6px;text-align:center;font-size:14px;color:#fff;
  letter-spacing:.3em;text-transform:uppercase;text-shadow:0 0 10px var(--pink);
}
.gallery{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));
  gap:14px;padding:18px;max-width:1200px;margin:0 auto;
}
.card{
  position:relative;cursor:pointer;border-radius:12px;overflow:hidden;
  background:rgba(22,0,46,.7);border:1px solid rgba(255,255,255,.25);
  transition:.15s;backdrop-filter:blur(2px);
}
.card:hover{
  transform:translateY(-4px) scale(1.02);
  border-color:var(--pink);
  box-shadow:0 0 22px var(--pink),0 0 40px rgba(1,205,254,.4);
}
.card .thumb{width:100%;aspect-ratio:1/1;display:block;background:var(--bg)}
.card .label{
  position:absolute;left:0;right:0;bottom:0;display:flex;justify-content:space-between;gap:6px;
  font-size:11px;padding:7px 9px;background:linear-gradient(transparent,rgba(22,0,46,.92));
}
.card .num{color:var(--green);font-weight:bold}
.card .name{color:var(--cyan);text-align:right;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* ---------- FOOTER ---------- */
footer{
  margin-top:30px;padding:26px 18px;text-align:center;font-size:13px;
  background:rgba(22,0,46,.7);border-top:1px solid var(--grid);
}
footer .big{
  font-style:italic;font-weight:900;font-size:22px;
  background:linear-gradient(90deg,var(--cyan),var(--pink));
  -webkit-background-clip:text;background-clip:text;color:transparent;
}

/* ---------- VIEWER PAGE ---------- */
.viewer-wrap{display:flex;flex-direction:column;min-height:100vh}
.viewer-top{
  display:flex;align-items:center;gap:14px;flex-wrap:wrap;
  padding:12px 18px;background:rgba(22,0,46,.7);border-bottom:2px solid var(--pink);
}
.viewer-top .vnum{color:var(--green);font-weight:900;font-size:22px}
.viewer-top .vtitle{color:var(--cyan);font-size:18px;font-style:italic}
.viewer-top .vprompt{color:#d9c7f0;font-size:12px;flex:1 1 280px}
.btn{
  border:1px solid var(--cyan);background:rgba(255,255,255,.06);color:var(--cyan);
  padding:8px 12px;border-radius:18px;font-family:var(--sans);cursor:pointer;font-size:13px;
}
.btn:hover{background:var(--cyan);color:#16002e}
#stage{flex:1;display:flex;align-items:center;justify-content:center;padding:18px}
#stage canvas{border-radius:10px;border:1px solid rgba(255,255,255,.3);
  box-shadow:0 0 50px rgba(255,113,206,.35)}

/* ---------- CHATBOT (Windows-98 vibe) ---------- */
#chatbot{
  position:fixed;right:18px;bottom:18px;width:340px;max-width:92vw;z-index:500;
  background:#dcd6ec;color:#16002e;border-radius:6px;font-size:13px;
  border:2px solid #fff;box-shadow:0 0 0 2px #7a4fb0, 8px 8px 22px rgba(0,0,0,.5);
  display:flex;flex-direction:column;overflow:hidden;
}
#chatbot.collapsed .chat-body,#chatbot.collapsed .chat-quick,#chatbot.collapsed .chat-input{display:none}
.chat-head{
  background:linear-gradient(90deg,var(--purple),var(--pink));color:#fff;
  padding:8px 10px;font-weight:bold;display:flex;justify-content:space-between;
  cursor:pointer;letter-spacing:.05em;
}
.chat-body{height:300px;overflow-y:auto;padding:10px;display:flex;flex-direction:column;gap:8px;background:#f4f0ff}
.msg{padding:7px 9px;border-radius:10px;max-width:88%;line-height:1.4}
.msg.bot{align-self:flex-start;background:#fff;border:1px solid #cbb8ec}
.msg.user{align-self:flex-end;background:var(--cyan);color:#04323a}
.chat-quick{display:flex;flex-wrap:wrap;gap:5px;padding:8px 10px;background:#e7e0f7}
.chat-quick button{
  background:#fff;border:1px solid var(--purple);color:var(--purple);border-radius:12px;
  font-size:11px;padding:4px 8px;cursor:pointer;font-family:var(--sans)}
.chat-quick button:hover{background:var(--purple);color:#fff}
.chat-input{display:flex;background:#fff;border-top:1px solid #cbb8ec}
.chat-input input{flex:1;background:#fff;border:none;color:#16002e;padding:10px;font-family:var(--sans);font-size:13px;outline:none}
.chat-input button{background:var(--pink);color:#fff;border:none;padding:0 14px;cursor:pointer;font-weight:bold}

@media(max-width:520px){#chatbot{right:8px;bottom:8px;left:8px;width:auto}}