/* ===== COLOSAL — couche WTF ===== */
body{position:relative}
.card{position:relative}

/* spirale hypnotique */
.spiral{
  position:fixed;right:-120px;top:30vh;width:380px;height:380px;border-radius:50%;
  background:repeating-conic-gradient(from 0deg,#8b5cf6 0 10deg,#22d3ee 10deg 20deg,#0b1020 20deg 30deg);
  -webkit-mask:radial-gradient(circle,transparent 8%,#000 9%,#000 70%,transparent 71%);
          mask:radial-gradient(circle,transparent 8%,#000 9%,#000 70%,transparent 71%);
  opacity:.28;pointer-events:none;z-index:-1;animation:spinSlow 14s linear infinite;
}
@keyframes spinSlow{to{transform:rotate(360deg)}}

/* titre qui bugue */
h1 span{animation:glitch 3.2s infinite steps(1)}
@keyframes glitch{
  0%,92%,100%{text-shadow:none;transform:none}
  93%{text-shadow:3px 0 #fb7185,-3px 0 #22d3ee;transform:translateX(2px) skewX(-6deg)}
  95%{text-shadow:-4px 0 #fb7185,4px 0 #22d3ee;transform:translateX(-3px)}
  97%{text-shadow:2px 2px #34d399;transform:scaleY(1.08)}
}

/* bouton qui fuit */
#dodgeBtn{
  border:2px dashed var(--danger);border-radius:12px;padding:.7rem 1rem;cursor:pointer;
  color:var(--danger);background:transparent;font-weight:800;
  transition:left .18s cubic-bezier(.3,1.6,.5,1),top .18s cubic-bezier(.3,1.6,.5,1);
  animation:wobble 1.4s ease-in-out infinite;
}
@keyframes wobble{0%,100%{rotate:-2deg}50%{rotate:2deg}}

/* stickers placés n'importe où */
.sticker{
  position:absolute;z-index:5;pointer-events:none;font-weight:900;
  padding:.3rem .7rem;border-radius:8px;background:#fde047;color:#111;
  transform:rotate(var(--r,0deg));box-shadow:4px 4px 0 rgba(0,0,0,.45);
  font-size:.95rem;white-space:nowrap;
}
.sticker.pink{background:#f472b6}
.sticker.cyan{background:#22d3ee}
.sticker.round{border-radius:50%;padding:1.1rem .9rem;text-align:center;line-height:1.05}

/* bandeau qui défile */
.marquee{
  overflow:hidden;white-space:nowrap;margin:1.5rem -2rem;transform:rotate(-2.5deg);
  background:repeating-linear-gradient(45deg,#fde047 0 18px,#111 18px 36px);
  border-block:3px solid #111;
}
.marquee .track{display:inline-block;animation:marq 16s linear infinite;padding:.4rem 0}
.marquee span{
  display:inline-block;background:#111;color:#fde047;font-weight:900;letter-spacing:.1em;
  padding:.15rem 1rem;margin:0 .5rem;
}
@keyframes marq{to{transform:translateX(-50%)}}

/* laboratoire */
.lab{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:1.2rem;align-items:start}
.lab figure{margin:0;text-align:center}
.lab figcaption{color:var(--muted);font-size:.8rem;margin-top:.4rem}
.chaos{margin-top:1rem}
.chaos .card{margin-bottom:1rem}

/* cube 3D */
.scene{width:110px;height:110px;perspective:520px;margin:18px auto}
.cube{width:100%;height:100%;position:relative;transform-style:preserve-3d;animation:cubespin 9s linear infinite}
.cube .f{
  position:absolute;inset:0;display:grid;place-items:center;font-weight:900;font-size:1.05rem;
  border:2px solid var(--b);background:rgba(34,211,238,.14);color:var(--fg);
}
.f1{transform:translateZ(55px)}
.f2{transform:rotateY(90deg) translateZ(55px)}
.f3{transform:rotateY(180deg) translateZ(55px)}
.f4{transform:rotateY(-90deg) translateZ(55px)}
.f5{transform:rotateX(90deg) translateZ(55px)}
.f6{transform:rotateX(-90deg) translateZ(55px)}
@keyframes cubespin{to{transform:rotateX(360deg) rotateY(720deg)}}

/* radar */
.radar{
  position:relative;width:150px;height:150px;margin:6px auto;border-radius:50%;
  border:2px solid var(--ok);overflow:hidden;
  background:
    radial-gradient(circle,transparent 0 24%,rgba(52,211,153,.35) 24.5% 25.5%,transparent 26% 49%,rgba(52,211,153,.35) 49.5% 50.5%,transparent 51%),
    linear-gradient(var(--ok),var(--ok)) center/1px 100% no-repeat,
    linear-gradient(var(--ok),var(--ok)) center/100% 1px no-repeat,
    #03140e;
}
.radar::before{
  content:"";position:absolute;inset:0;border-radius:50%;
  background:conic-gradient(from 0deg,rgba(52,211,153,.75),transparent 70deg);
  animation:spinSlow 3s linear infinite;
}
.radar b{position:absolute;font-size:.9rem;animation:blip 3s ease-in-out infinite}
@keyframes blip{0%,100%{opacity:.1}50%{opacity:1}}

/* jauge inutile */
.gauge{
  position:relative;width:180px;height:92px;margin:22px auto 6px;border-radius:180px 180px 0 0;
  background:conic-gradient(from 270deg at 50% 100%,#34d399 0deg,#fde047 90deg,#fb7185 180deg,transparent 180deg);
}
.gauge::after{content:"";position:absolute;left:25px;right:25px;bottom:0;height:67px;border-radius:140px 140px 0 0;background:#0b1020}
:root.light .gauge::after{background:#f6f8ff}
.needle{
  position:absolute;left:calc(50% - 2px);bottom:0;width:4px;height:82px;background:var(--fg);
  transform-origin:50% 100%;transform:rotate(0deg);z-index:2;border-radius:3px;
  transition:transform .55s cubic-bezier(.2,2.2,.4,1);
}
.hub{position:absolute;left:calc(50% - 8px);bottom:-8px;width:16px;height:16px;border-radius:50%;background:var(--danger);z-index:3}

/* lampe à lave */
.lava{
  position:relative;width:120px;height:170px;margin:6px auto;border-radius:40px 40px 50px 50px;
  background:#1b0d2e;overflow:hidden;border:3px solid #6d28d9;filter:url(#goo);
}
.lava i{
  position:absolute;left:50%;bottom:-30px;width:50px;height:50px;border-radius:50%;
  background:radial-gradient(circle at 35% 35%,#fda4af,#f43f5e);
  animation:rise 6s ease-in-out infinite;
}
.lava i:nth-child(2){width:36px;height:36px;left:25%;animation-duration:8s;animation-delay:-3s;background:radial-gradient(circle at 35% 35%,#fde047,#f97316)}
.lava i:nth-child(3){width:60px;height:60px;left:60%;animation-duration:10s;animation-delay:-5s;background:radial-gradient(circle at 35% 35%,#67e8f9,#8b5cf6)}
.lava i:nth-child(4){width:28px;height:28px;left:45%;animation-duration:7s;animation-delay:-1s}
@keyframes rise{0%,100%{transform:translate(-50%,0) scale(1)}50%{transform:translate(-20%,-170px) scale(1.4,.8)}}

/* barre de chargement */
.loadbar{height:18px;border-radius:99px;border:2px solid var(--stroke);overflow:hidden;margin:.4rem 0}
.loadbar i{
  display:block;height:100%;width:0;transition:width .35s;
  background:repeating-linear-gradient(45deg,var(--a) 0 12px,var(--b) 12px 24px);
  background-size:34px 34px;animation:stripes .6s linear infinite;
}
@keyframes stripes{to{background-position:34px 0}}

/* yeux */
.eye{
  position:absolute;border-radius:50%;background:#fff;border:3px solid #111;z-index:6;
  box-shadow:inset -3px -4px 0 rgba(0,0,0,.12);pointer-events:none;
  animation:blink 5s infinite;overflow:hidden;
}
.eye i{position:absolute;left:30%;top:30%;width:40%;height:40%;border-radius:50%;background:#111;transition:transform .08s}
.eye i::after{content:"";position:absolute;left:15%;top:15%;width:30%;height:30%;border-radius:50%;background:#fff}
@keyframes blink{0%,94%,100%{scale:1 1}97%{scale:1 .08}}
.bigeyes{position:fixed;left:14px;bottom:-26px;z-index:30;pointer-events:none;width:200px;height:110px}

/* DVD */
.dvd{
  position:fixed;left:0;top:0;z-index:4;pointer-events:none;font-weight:900;font-size:1.4rem;
  letter-spacing:.12em;padding:.2rem .6rem;border:3px solid currentColor;border-radius:10px;
  color:#22d3ee;mix-blend-mode:screen;opacity:.9;
}

/* créatures + traînée */
.creature{position:fixed;left:0;z-index:40;cursor:pointer;user-select:none;line-height:1;filter:drop-shadow(0 6px 6px rgba(0,0,0,.4))}
.trail{position:fixed;z-index:60;pointer-events:none;font-size:20px}

/* fenêtres rétro */
.win{
  position:fixed;z-index:70;width:min(280px,86vw);background:#c0c0c0;color:#000;
  border:2px solid;border-color:#fff #404040 #404040 #fff;box-shadow:6px 6px 0 rgba(0,0,0,.5);
  font:14px/1.35 Tahoma,Arial,sans-serif;
}
.win .bar{
  display:flex;justify-content:space-between;align-items:center;gap:.5rem;cursor:grab;touch-action:none;
  background:linear-gradient(90deg,#000080,#1084d0);color:#fff;font-weight:700;padding:3px 4px 3px 8px;
}
.win .bar button{
  width:20px;height:18px;line-height:14px;padding:0;font-weight:900;cursor:pointer;color:#000;
  background:#c0c0c0;border:2px solid;border-color:#fff #404040 #404040 #fff;
}
.win .body{padding:.9rem .8rem 1rem}

footer b{color:var(--ok)}

@media (max-width:700px){
  .sticker.hide-m,.spiral,.bigeyes{display:none}
  .marquee{margin-inline:-1.2rem}
}
@media (prefers-reduced-motion: reduce){
  .eye,.cube,.spiral,.marquee .track,.lava i,.radar::before{animation:none!important}
}