*, *::before, *::after { box-sizing:border-box; margin:0; padding:0; }
:root {
  --pink:#FF006E; --cyan:#00F5FF; --turmeric:#E3A000;
  --chili:#FF3D00; --lime:#C8FF00; --purple:#9B00FF;
}
html, body { width:100%; height:100%; background:#000; color:#fefefe; }
button, a, input, select, textarea, [role="button"] { touch-action: manipulation; }

@keyframes hue-spin     { to { filter:hue-rotate(360deg); } }
@keyframes glitch-base {
  0%,88%,100% { transform:translate(0) skew(0); }
  89% { transform:translate(-5px,2px) skew(-1.5deg); }
  90% { transform:translate(5px,-3px) skew(1.2deg); }
  91% { transform:translate(-3px,4px); }
  92% { transform:translate(3px,-2px) skew(.4deg); }
}
@keyframes go-left  { from{transform:translateX(0)}    to{transform:translateX(-50%)} }
@keyframes go-right { from{transform:translateX(-50%)} to{transform:translateX(0)}    }
@keyframes go-down  { from{transform:translateY(0)}    to{transform:translateY(-50%)} }
@keyframes go-up    { from{transform:translateY(-50%)} to{transform:translateY(0)}    }
@keyframes inner-chaos {
  0%   { transform:skewX(0) skewY(0) scale(1); }
  20%  { transform:skewX(var(--sx,5deg)) skewY(var(--sy,2deg)) scale(var(--sc,1.07)); }
  50%  { transform:skewX(calc(var(--sx,5deg)*-.6)) skewY(0) scale(1.02); }
  80%  { transform:skewX(0) skewY(calc(var(--sy,2deg)*-1)) scale(var(--sc,1.07)); }
  100% { transform:skewX(0) skewY(0) scale(1); }
}
@keyframes wv1 { from{transform:translateX(-7%) scaleY(1)} to{transform:translateX(7%) scaleY(1.2)} }
@keyframes wv2 { from{transform:translateX(6%) scaleY(1)}  to{transform:translateX(-6%) scaleY(1.15)} }
@keyframes wv3 { from{transform:translateX(-4%) scaleY(1)} to{transform:translateX(4%) scaleY(1.25)} }
@keyframes modal-pop { from{opacity:0;transform:scale(.5)} to{opacity:1;transform:scale(1)} }
@keyframes feed-glow {
  0%,100% { box-shadow:0 0 8px rgba(0,245,255,.2); }
  50%     { box-shadow:0 0 24px rgba(0,245,255,.65),0 0 48px rgba(0,150,255,.2); }
}
@keyframes chaos-glow {
  0%,100% { box-shadow:0 0 10px rgba(155,0,255,.35); }
  50%     { box-shadow:0 0 30px rgba(155,0,255,.85),0 0 60px rgba(100,0,255,.35); }
}
@keyframes ufo-blink  { 0%,100%{opacity:1} 50%{opacity:.1} }
@keyframes beam-pulse { 0%,100%{opacity:.4} 50%{opacity:.9} }
@keyframes eye-pulse  { 0%,100%{transform:translateX(-50%) scale(1)} 50%{transform:translateX(-50%) scale(1.4)} }
@keyframes ring-spin  { to { transform:rotate(360deg); } }
@keyframes cursor-hue {
  from { filter:drop-shadow(0 2px 8px rgba(0,0,0,.8)) hue-rotate(0deg); }
  to   { filter:drop-shadow(0 2px 8px rgba(0,0,0,.8)) hue-rotate(360deg); }
}
@keyframes oji-hue {
  from { filter:drop-shadow(0 0 14px rgba(255,140,0,.6)) hue-rotate(0deg); }
  to   { filter:drop-shadow(0 0 14px rgba(255,140,0,.6)) hue-rotate(360deg); }
}
@keyframes gl-r {
  0%,87%,100% { opacity:0; transform:translate(0); clip-path:none; }
  88%  { opacity:.9; transform:translate(-7px,3px); clip-path:inset(10% 0 65% 0); }
  89%  { opacity:.9; transform:translate(5px,-2px); clip-path:inset(55% 0 25% 0); }
  89.5%{ opacity:.7; transform:translate(-4px,1px); clip-path:inset(30% 0 50% 0); }
  90%  { opacity:0; }
}
@keyframes gl-b {
  0%,86%,100% { opacity:0; transform:translate(0); clip-path:none; }
  87%  { opacity:.8; transform:translate(8px,-4px); clip-path:inset(40% 0 35% 0); }
  88%  { opacity:.8; transform:translate(-6px,3px); clip-path:inset(20% 0 55% 0); }
  88.5%{ opacity:.6; transform:translate(4px,-1px); clip-path:inset(65% 0 15% 0); }
  89%  { opacity:0; }
}
@keyframes gl-w {
  0%,90%,100% { opacity:0; }
  91%  { opacity:1; transform:translate(0) skewX(-20deg); clip-path:inset(48% 0 48% 0); }
  91.5%{ opacity:0; }
  92%  { opacity:.6; transform:translate(-2px) skewX(10deg); clip-path:inset(20% 0 75% 0); }
  92.5%{ opacity:0; }
}
@keyframes scan-flash {
  0%,89%,100% { opacity:0; } 90% { opacity:1; } 91% { opacity:0; } 92% { opacity:.4; } 92.5% { opacity:0; }
}
@keyframes angry-shake {
  0%  { transform:translate(-4px,-2px) rotate(-3deg); }
  25% { transform:translate(4px,2px)   rotate(3deg);  }
  50% { transform:translate(-3px,4px)  rotate(-2deg); }
  75% { transform:translate(3px,-3px)  rotate(2deg);  }
}
@keyframes js-zoom {
  0%  { transform:scale(4.5); filter:brightness(4) saturate(6) hue-rotate(0deg); }
  12% { transform:scale(1.6); filter:brightness(2) saturate(4) hue-rotate(120deg); }
  75% { transform:scale(1.05); filter:brightness(1.3) saturate(2); opacity:1; }
  100%{ transform:scale(1); filter:brightness(1) saturate(1); opacity:0; }
}

/* Dynamically injected elements */
.bubble { position:fixed; border-radius:50%; border:1px solid rgba(120,210,255,.28); background:rgba(100,190,255,.04); pointer-events:none; z-index:2; }
.fly-el { position:fixed; pointer-events:none; z-index:15; white-space:nowrap; }

.ufo-body { position:relative; width:70px; height:24px; background:linear-gradient(180deg,#c0c0c0,#888,#666); border-radius:50%; box-shadow:0 0 20px rgba(0,255,200,.5),0 0 40px rgba(0,200,255,.2); }
.ufo-dome { position:absolute; top:-14px; left:50%; transform:translateX(-50%); width:34px; height:16px; background:linear-gradient(180deg,rgba(160,255,255,.7),rgba(0,200,255,.4)); border-radius:50% 50% 0 0; border:1px solid rgba(0,255,255,.7); }
.ufo-lights { position:absolute; bottom:4px; left:0; right:0; display:flex; justify-content:space-evenly; }
.ufo-light  { width:5px; height:5px; border-radius:50%; animation:ufo-blink 1.2s infinite; }
.ufo-light:nth-child(1) { background:#ff0; }
.ufo-light:nth-child(2) { background:#0ff; animation-delay:.4s; }
.ufo-light:nth-child(3) { background:#f0f; animation-delay:.8s; }
.ufo-light:nth-child(4) { background:#ff0; animation-delay:.2s; }
.ufo-beam { position:absolute; top:100%; left:50%; transform:translateX(-50%); width:0; height:0; border-left:20px solid transparent; border-right:20px solid transparent; border-top:30px solid rgba(0,255,150,.18); filter:blur(4px); animation:beam-pulse 2s ease-in-out infinite; }
.pyramid-wrap { position:relative; display:inline-block; }
.pyramid { width:0; height:0; border-left:var(--ps,30px) solid transparent; border-right:var(--ps,30px) solid transparent; border-bottom:calc(var(--ps,30px)*1.6) solid rgba(227,160,0,.7); filter:drop-shadow(0 0 10px rgba(227,160,0,.5)); position:relative; }
.pyramid-eye { position:absolute; top:calc(var(--ps,30px)*.6); left:50%; transform:translateX(-50%); width:10px; height:10px; border-radius:50%; background:rgba(255,61,0,.95); box-shadow:0 0 10px rgba(255,61,0,.8); animation:eye-pulse 2.5s ease-in-out infinite; }
.crop-circle { position:relative; display:inline-flex; align-items:center; justify-content:center; }
.crop-ring { position:absolute; border-radius:50%; border-style:solid; animation:ring-spin var(--rs,8s) linear infinite; }

/* ── Modal (FKET design system) ─────────────────────────────────
 * Tokens mirrored in src/lib/tokens.js
 * Per-modal accent set inline via --modal-accent.
 */
.modal-box {
  position:fixed; z-index:2000;
  background:rgba(8,8,14,.94);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  color:#e8e8f0;
  border:1px solid rgba(255,255,255,.12);
  box-shadow:0 24px 70px rgba(0,0,0,.75), 0 0 0 1px rgba(0,0,0,.4);
  min-width:300px; max-width:380px;
  font-family:'Space Mono', monospace;
  font-size:.72rem; line-height:1.65; letter-spacing:.02em;
  pointer-events:all;
  overflow:hidden;
  animation:modal-pop .25s cubic-bezier(.34,1.56,.64,1) forwards;
}
.modal-box::before {
  content:''; position:absolute; top:0; left:0; right:0; height:2px;
  background:var(--modal-accent, var(--chili)); z-index:2; pointer-events:none;
}
.modal-header {
  padding:.75rem 1rem .65rem;
  border-bottom:1px solid rgba(255,255,255,.06);
  display:flex; justify-content:space-between; align-items:center; gap:.8rem;
  background:rgba(255,255,255,.025);
  user-select:none; cursor:move;
}
.modal-title {
  font-family:'Bebas Neue', sans-serif;
  font-size:1rem; letter-spacing:.08em; color:#fefefe;
}
.modal-close {
  background:transparent; border:1px solid rgba(255,255,255,.15);
  color:rgba(255,255,255,.7);
  width:22px; height:22px; font-size:.85rem; line-height:1;
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
  cursor:pointer;
  transition:background .15s, color .15s, border-color .15s;
}
.modal-close:hover {
  background:var(--modal-accent, var(--chili)); color:#fefefe; border-color:transparent;
}
.modal-body {
  padding:1rem;
  font-size:.72rem; line-height:1.75;
  color:rgba(232,232,240,.82);
}
.modal-body strong { color:var(--turmeric); font-weight:700; }
.modal-body em     { font-style:normal; color:var(--cyan); }
.modal-body code   { background:rgba(0,245,255,.08); color:var(--cyan); padding:1px 5px; font-size:.9em; }
.modal-body small  { color:rgba(255,255,255,.4); }
.modal-body .modal-eula {
  height:70px; overflow-y:scroll;
  font-size:.65rem; line-height:1.6;
  border:1px solid rgba(255,255,255,.1); padding:.45rem .55rem;
  background:rgba(0,0,0,.35); color:rgba(255,255,255,.55);
  margin-top:.45rem;
}
.modal-body input[type="text"],
.modal-body input[type="email"] {
  width:100%; margin-top:.45rem;
  background:rgba(0,0,0,.35); border:1px solid rgba(255,255,255,.12);
  padding:.4rem .55rem; color:#fefefe;
  font-family:'Space Mono', monospace; font-size:.72rem;
  outline:none; transition:border-color .15s;
}
.modal-body input[type="text"]:focus,
.modal-body input[type="email"]:focus { border-color:var(--cyan); }
.modal-body input[type="radio"],
.modal-body input[type="checkbox"]   { accent-color:var(--cyan); margin-right:4px; vertical-align:middle; }
.modal-body label                    { display:inline-block; margin-right:.6rem; cursor:pointer; }
.modal-footer {
  padding:.65rem 1rem .85rem;
  border-top:1px solid rgba(255,255,255,.06);
  background:rgba(0,0,0,.18);
  display:flex; justify-content:flex-end; gap:.5rem;
}
.mbtn {
  font-family:'Bebas Neue', sans-serif;
  font-size:.82rem; letter-spacing:.08em;
  padding:.45rem 1rem;
  border:1px solid transparent;
  background:rgba(255,255,255,.05); color:rgba(255,255,255,.75);
  cursor:pointer;
  clip-path:polygon(5px 0%, 100% 0%, calc(100% - 5px) 100%, 0% 100%);
  transition:background .15s, color .15s, transform .12s, filter .15s;
}
.mbtn:hover         { transform:scale(1.04); }
.mbtn.cancel        { background:rgba(255,255,255,.04); border-color:rgba(255,255,255,.08); }
.mbtn.cancel:hover  { background:rgba(255,255,255,.1); color:#fefefe; }
.mbtn.ok            { background:var(--modal-accent, var(--chili)); color:#fefefe; }
.mbtn.ok:hover      { filter:brightness(1.18); }
.mbtn.warn          { background:var(--chili); color:#fefefe; } /* legacy */