:root{
  --bg:radial-gradient(circle at 18% 18%,#4f3ed2,#1c2552 70%);
  --panel-bg:rgba(10,12,40,0.48);
  --panel-border:rgba(255,255,255,0.18);
  --panel-shadow:0 30px 60px rgba(0,0,0,0.45);
  --wheel-glow:0 25px 60px rgba(0,0,0,0.45);
  --button-grad:linear-gradient(135deg,#ffd54f,#ff6f61);
  --button-text:#1d2245;
  --text-base:#ffffff;
  --text-soft:rgba(255,255,255,0.75);
  --accent:#ffd54f;
}

*{
  box-sizing:border-box;
}

html,body{
  height:100%;
}

body{
  font-family:"Segoe UI",sans-serif;
  margin:0;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:2rem clamp(1.5rem,4vw,4rem);
  background:var(--bg);
  color:var(--text-base);
}

.app{
  width:min(1200px,100%);
  display:flex;
  flex-direction:column;
  gap:2.5rem;
  align-items:center;
}

.app__header{
  text-align:center;
  max-width:600px;
}

.app__header h1{
  margin:0 0 0.5rem;
  font-size:clamp(2.2rem,4vw,3rem);
  letter-spacing:0.04em;
  text-shadow:0 10px 30px rgba(0,0,0,0.35);
}

.app__header p{
  margin:0;
  font-size:1.05rem;
  opacity:0.85;
}

.app__layout{
  width:100%;
  display:flex;
  gap:2.5rem;
  align-items:stretch;
  justify-content:space-between;
}

.app__panel{
  display:flex;
  flex-direction:column;
  align-items:stretch;
  gap:1.2rem;
  padding:1.8rem clamp(1.5rem,3vw,2.4rem);
  border-radius:28px;
  background:var(--panel-bg);
  border:1px solid var(--panel-border);
  box-shadow:var(--panel-shadow);
  backdrop-filter:blur(28px);
  width:min(420px,100%);
}

.theme-picker{
  width:100%;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:0.4rem;
  font-weight:600;
  color:var(--text-soft);
}

.theme-picker select{
  width:100%;
  padding:0.75rem 1rem;
  border-radius:14px;
  border:1px solid rgba(255,255,255,0.25);
  background:rgba(0,0,0,0.25);
  color:var(--text-base);
  font-size:1rem;
  outline:none;
  transition:border 0.25s ease,box-shadow 0.25s ease;
}

.theme-picker select:focus{
  border-color:var(--accent);
  box-shadow:0 0 0 4px rgba(255,213,79,0.18);
}

textarea{
  width:100%;
  min-height:140px;
  padding:1rem 1.1rem;
  border-radius:18px;
  border:none;
  font-size:1rem;
  resize:vertical;
  box-shadow:0 15px 35px rgba(0,0,0,0.25);
  background:rgba(0,0,0,0.25);
  color:var(--text-base);
  outline:none;
  transition:box-shadow 0.3s ease,transform 0.3s ease;
}

textarea:focus{
  box-shadow:0 22px 45px rgba(0,0,0,0.35);
  transform:translateY(-3px);
}

button{
  cursor:pointer;
  padding:0.9rem 2.9rem;
  border-radius:999px;
  border:none;
  font-size:1.15rem;
  font-weight:700;
  color:var(--button-text);
  background:var(--button-grad);
  box-shadow:0 16px 35px rgba(0,0,0,0.25);
  transition:transform 0.25s cubic-bezier(0.4,0,0.2,1),box-shadow 0.25s;
}

button:hover:not(:disabled){
  transform:translateY(-6px) scale(1.02);
  box-shadow:0 24px 45px rgba(0,0,0,0.35);
}

button:disabled{
  cursor:wait;
  opacity:0.6;
  box-shadow:none;
  transform:none;
}

.app__stage{
  flex:1 1 auto;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:1.6rem;
}

.wheel-frame{
  display:flex;
  align-items:center;
  justify-content:center;
  position:relative;
  width:clamp(320px,58vw,640px);
  aspect-ratio:1;
  padding:2.6rem;
  border-radius:32px;
  background:rgba(0,0,0,0.2);
  box-shadow:0 28px 50px rgba(0,0,0,0.4);
  backdrop-filter:blur(18px);
  overflow:visible;
}

.wheel-frame::after{
  content:"";
  position:absolute;
  inset:10%;
  border-radius:50%;
  border:2px dashed rgba(255,255,255,0.12);
  pointer-events:none;
  transition:opacity 0.4s ease,transform 0.4s ease;
  opacity:0.35;
}

.wheel-frame.celebrate::after{
  animation:haloPulse 1.8s ease-out forwards;
}

@keyframes haloPulse{
  0%{opacity:0;transform:scale(0.8);}
  40%{opacity:0.9;transform:scale(1.05);}
  100%{opacity:0;transform:scale(1.3);}
}

canvas{
  width:100%;
  height:100%;
  border-radius:50%;
  box-shadow:var(--wheel-glow);
  background-color:rgba(0,0,0,0.18);
  transition:filter 0.3s ease,transform 0.3s ease;
}

canvas.spinning{
  animation:wheelPulse 0.6s ease-in-out infinite;
  filter:saturate(1.25);
}

@keyframes wheelPulse{
  0%,100%{transform:scale(1);}
  50%{transform:scale(1.02);}
}

#result{
  font-size:1.5rem;
  font-weight:700;
  min-height:1.8em;
  letter-spacing:0.04em;
  text-shadow:0 8px 25px rgba(0,0,0,0.35);
  opacity:0;
  transform:translateY(12px) scale(0.96);
  transition:opacity 0.4s ease,transform 0.4s ease;
}

#result.show{
  opacity:1;
  transform:translateY(0) scale(1);
  animation:resultPulse 0.8s ease-out;
}

#confetti{
  position:fixed;
  inset:0;
  pointer-events:none;
  overflow:hidden;
}

.secret-panel{
  position:fixed;
  bottom:24px;
  right:24px;
  width:260px;
  padding:1rem 1.2rem;
  border-radius:16px;
  background:rgba(6,10,26,0.88);
  border:1px solid rgba(120,160,255,0.25);
  box-shadow:0 22px 60px rgba(0,0,0,0.55);
  display:flex;
  flex-direction:column;
  gap:0.8rem;
  font-family:"Fira Code","Courier New",monospace;
  color:#cdd7ff;
  opacity:0;
  pointer-events:none;
  transform:translateY(12px) scale(0.98);
  transition:opacity 0.25s ease,transform 0.25s ease;
  z-index:50;
}

.secret-panel::before{
  content:"";
  position:absolute;
  inset:-1px;
  border-radius:inherit;
  border:1px solid rgba(53,255,231,0.16);
  pointer-events:none;
}

.secret-panel--visible{
  opacity:1;
  pointer-events:auto;
  transform:translateY(0) scale(1);
}

.secret-panel__header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  font-size:0.75rem;
  letter-spacing:0.24em;
  text-transform:uppercase;
  color:#8ab6ff;
}

.secret-panel__header button{
  cursor:pointer;
  background:transparent;
  border:none;
  color:#8ab6ff;
  font-size:1.1rem;
}

.secret-panel__field{
  display:flex;
  flex-direction:column;
  gap:0.35rem;
  font-size:0.75rem;
  letter-spacing:0.08em;
}

.secret-panel select{
  width:100%;
  padding:0.45rem 0.6rem;
  border-radius:10px;
  background:rgba(0,0,0,0.35);
  border:1px solid rgba(140,180,255,0.25);
  color:#cdd7ff;
  font-family:inherit;
  font-size:0.85rem;
}

.secret-panel button#secret-apply{
  align-self:flex-end;
  padding:0.5rem 0.9rem;
  border-radius:999px;
  border:none;
  font-size:0.75rem;
  letter-spacing:0.12em;
  text-transform:uppercase;
  cursor:pointer;
  background:linear-gradient(135deg,#9d65ff,#35ffe7);
  color:#10122c;
  box-shadow:0 14px 28px rgba(0,0,0,0.35);
}

.secret-panel button:focus-visible{
  outline:2px solid #ffd54f;
  outline-offset:2px;
}

.celebration{
  position:absolute;
  inset:0;
  pointer-events:none;
  display:flex;
  align-items:center;
  justify-content:center;
  mix-blend-mode:screen;
  z-index:20;
}

.celebration.starfall{
  background:linear-gradient(180deg,rgba(12,12,28,0.05),rgba(12,12,28,0.6));
}

.starfall .star{
  position:absolute;
  top:-20%;
  width:3px;
  height:70px;
  background:linear-gradient(180deg,rgba(255,255,255,0.9),rgba(255,255,255,0));
  animation:starFall 2.8s linear infinite;
  opacity:0.85;
}

.starfall .star::after{
  content:"";
  position:absolute;
  bottom:-6px;
  left:-4px;
  right:-4px;
  height:6px;
  border-radius:50%;
  background:radial-gradient(circle,rgba(255,255,255,0.8),rgba(255,255,255,0));
}

.balloon-show{
  mix-blend-mode:normal;
}

.balloon-show .balloon{
  position:absolute;
  bottom:-20%;
  width:70px;
  height:90px;
  border-radius:40% 40% 45% 45%;
  box-shadow:0 18px 35px rgba(0,0,0,0.35);
  animation:balloonRise 5.2s cubic-bezier(0.3,0,0.2,1) forwards;
}

.balloon-show .balloon::after{
  content:"";
  position:absolute;
  bottom:-32px;
  left:50%;
  width:2px;
  height:38px;
  background:rgba(255,255,255,0.55);
  transform:translateX(-50%);
  opacity:0.6;
}

#result.flash-glow{
  animation:resultFlash 1.8s ease-out 2;
  text-shadow:0 0 16px rgba(255,255,255,0.9),0 0 45px var(--accent);
}

.lightning-burst{
  mix-blend-mode:screen;
}

.lightning-burst .bolt{
  position:absolute;
  top:-10%;
  width:4px;
  height:140%;
  background:linear-gradient(180deg,rgba(255,255,255,0),rgba(255,255,255,0.95),rgba(255,255,255,0));
  filter:drop-shadow(0 0 12px rgba(255,255,255,0.8));
  transform-origin:center top;
  animation:boltStrike 0.72s ease-out forwards;
}

.color-wave{
  background:conic-gradient(from 180deg,#4f3ed2,#6d31ff,#35ffe7,#ffd54f,#ff6f61,#4f3ed2);
  animation:colorSweep 3.4s ease-in-out forwards;
  opacity:0.75;
}

.matrix-rain{
  background:rgba(2,8,8,0.92);
  color:#00ff9c;
  font-family:"Fira Code","Courier New",monospace;
  overflow:hidden;
  text-transform:uppercase;
  mix-blend-mode:normal;
}

.matrix-rain .glyph-column{
  position:absolute;
  top:-120%;
  font-size:clamp(16px,2.5vw,26px);
  letter-spacing:0.15em;
  text-shadow:0 0 8px rgba(0,255,156,0.8);
  animation:matrixFall 3.6s linear infinite;
}

.matrix-rain .matrix-tag{
  position:absolute;
  bottom:14%;
  left:50%;
  transform:translateX(-50%);
  background:rgba(0,0,0,0.85);
  padding:0.8rem 1.4rem;
  border:1px solid rgba(0,255,156,0.5);
  border-radius:14px;
  box-shadow:0 0 24px rgba(0,255,156,0.35);
  font-size:clamp(1rem,2vw,1.3rem);
}

.extraction-badge .badge{
  background:rgba(12,18,46,0.88);
  border-radius:24px;
  padding:1.3rem 1.8rem;
  display:flex;
  gap:1.2rem;
  align-items:center;
  border:1px solid rgba(255,255,255,0.22);
  box-shadow:0 24px 60px rgba(0,0,0,0.45);
  animation:badgeDrop 0.7s cubic-bezier(0.21,1,0.32,1) forwards;
  mix-blend-mode:normal;
}

.extraction-badge .badge-icon{
  font-size:2.4rem;
  filter:drop-shadow(0 8px 16px rgba(0,0,0,0.35));
}

.extraction-badge .badge-text{
  display:flex;
  flex-direction:column;
  gap:0.35rem;
  font-family:"Segoe UI",sans-serif;
}

.extraction-badge .badge-text p{
  margin:0;
  font-size:0.95rem;
  opacity:0.85;
}

.extraction-badge .badge-text strong{
  font-size:1.4rem;
  letter-spacing:0.05em;
}

.terminal-screen{
  background:rgba(6,8,12,0.96);
  mix-blend-mode:normal;
  align-items:flex-start;
  padding:3rem clamp(1.6rem,5vw,3.5rem);
  font-family:"IBM Plex Mono","Fira Code",monospace;
  color:#54ff92;
  text-transform:uppercase;
}

.terminal-line{
  font-size:clamp(1.2rem,2.6vw,1.6rem);
  position:relative;
  margin:0;
}

.terminal-line::after{
  content:"▮";
  margin-left:0.2rem;
  animation:blink 0.6s steps(1) infinite;
}

.terminal-complete .terminal-line::after{
  animation:none;
  opacity:0;
}

.boot-screen{
  background:radial-gradient(circle at top,#060a11,#020409 65%);
  mix-blend-mode:normal;
  font-family:"IBM Plex Mono","Courier New",monospace;
  align-items:flex-start;
  padding:2.6rem clamp(1.4rem,4vw,3.4rem);
  color:#8be9fd;
  text-transform:uppercase;
}

.boot-log{
  margin:0;
  line-height:1.6;
  font-size:clamp(0.95rem,2.1vw,1.2rem);
}

.boot-screen::after{
  content:"BOOTING RNG SUBSYSTEM";
  position:absolute;
  top:8%;
  right:10%;
  font-size:0.75rem;
  letter-spacing:0.4em;
  opacity:0.4;
}

.boot-complete{
  box-shadow:inset 0 0 40px rgba(81,255,199,0.3);
}

.breach-screen{
  background:linear-gradient(135deg,rgba(4,12,8,0.92),rgba(8,4,12,0.92));
  filter:contrast(1.1);
  mix-blend-mode:normal;
}

.breach-text{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:0.8rem;
  font-family:"Share Tech Mono","Fira Code",monospace;
  text-transform:uppercase;
  letter-spacing:0.2em;
  color:#44ff80;
  text-shadow:0 0 12px rgba(68,255,128,0.8);
  animation:breachPulse 1.4s ease-in-out infinite;
}

.breach-text span{
  font-size:clamp(1rem,2.5vw,1.3rem);
  color:#ff3355;
}

.breach-text strong{
  font-size:clamp(1.6rem,3vw,2.2rem);
}

.breach-screen::after{
  content:"";
  position:absolute;
  inset:0;
  background:repeating-linear-gradient(0deg,rgba(255,0,0,0.05),rgba(255,0,0,0.05) 2px,transparent 2px,transparent 6px);
  opacity:0.3;
  animation:scanLines 1.6s linear infinite;
}

.breach-flash{
  position:absolute;
  width:18px;
  height:18px;
  border-radius:50%;
  background:radial-gradient(circle,#ff3355,rgba(255,51,85,0));
  animation:breachFlash 0.8s ease-out forwards;
}

.data-pulse{
  background:radial-gradient(circle at center,rgba(0,255,200,0.12),rgba(0,0,0,0.9));
  overflow:hidden;
  mix-blend-mode:normal;
}

.data-pulse .pulse-node{
  position:relative;
  padding:0.8rem 1.4rem;
  border-radius:999px;
  border:1px solid rgba(0,255,200,0.6);
  background:rgba(0,50,60,0.75);
  box-shadow:0 0 30px rgba(0,255,200,0.45);
  font-family:"Fira Code","Courier New",monospace;
  text-transform:uppercase;
  letter-spacing:0.18em;
  animation:nodePulse 1.6s ease-in-out infinite;
}

.data-pulse .data-stream{
  position:absolute;
  top:-20%;
  width:2px;
  height:140%;
  background:linear-gradient(180deg,rgba(0,255,200,0),rgba(0,255,200,0.9),rgba(0,255,200,0));
  animation:dataFlow 2.4s linear infinite;
  opacity:0.65;
}

.sudo-console{
  background:rgba(8,6,12,0.96);
  color:#fffbf5;
  font-family:"Fira Code","Courier New",monospace;
  align-items:flex-start;
  padding:2.4rem clamp(1.3rem,4vw,3rem);
  text-shadow:0 0 18px rgba(255,200,120,0.3);
  mix-blend-mode:normal;
}

.sudo-log{
  margin:0;
  line-height:1.7;
  font-size:clamp(1rem,2.3vw,1.3rem);
}

.sudo-console::before{
  content:"root@namensrad";
  position:absolute;
  top:12%;
  left:10%;
  font-size:0.85rem;
  opacity:0.4;
  letter-spacing:0.2em;
}

.sudo-console .sudo-log::after{
  content:"▋";
  animation:blink 0.6s steps(1) infinite;
  margin-left:0.3rem;
}

.sudo-complete .sudo-log::after{
  animation:none;
  opacity:0;
}

.binary-explosion{
  background:radial-gradient(circle at center,rgba(0,30,40,0.3),rgba(0,0,0,0.85));
  mix-blend-mode:normal;
}

.binary-explosion .bit{
  position:absolute;
  font-family:"Fira Code","Courier New",monospace;
  color:#35ffe7;
  text-shadow:0 0 14px rgba(53,255,231,0.7);
  animation:bitBlast 1.1s ease-out forwards;
  font-size:clamp(0.85rem,2vw,1.2rem);
}

.circuit-glitch{
  background:radial-gradient(circle at center,rgba(14,20,46,0.86),rgba(0,0,0,0.92));
  mix-blend-mode:normal;
}

.circuit-glitch::before,
.circuit-glitch::after{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(90deg,transparent 48%,rgba(100,255,250,0.25) 49%,rgba(100,255,250,0.25) 51%,transparent 52%),
    repeating-linear-gradient(0deg,rgba(53,255,231,0.05),rgba(53,255,231,0.05) 6px,transparent 6px,transparent 12px);
  opacity:0.25;
  animation:circuitScan 4s linear infinite;
}

.circuit-glitch::after{
  background:
    linear-gradient(0deg,transparent 48%,rgba(157,101,255,0.3) 49%,rgba(157,101,255,0.3) 51%,transparent 52%),
    repeating-linear-gradient(90deg,rgba(157,101,255,0.08),rgba(157,101,255,0.08) 10px,transparent 10px,transparent 20px);
  animation:circuitScan 6s linear infinite reverse;
}

.circuit-label{
  position:relative;
  padding:1.1rem 1.9rem;
  border-radius:22px;
  background:rgba(12,18,42,0.88);
  border:1px solid rgba(100,255,250,0.35);
  box-shadow:0 0 28px rgba(157,101,255,0.45);
  font-family:"Fira Code","Courier New",monospace;
  text-transform:uppercase;
  letter-spacing:0.22em;
  animation:labelGlitch 2s linear infinite;
}

.circuit-label span{
  display:block;
  font-size:0.75rem;
  opacity:0.65;
  margin-bottom:0.4rem;
}

.loading-finish{
  background:radial-gradient(circle at center,rgba(20,22,52,0.88),rgba(0,0,0,0.92));
  flex-direction:column;
  gap:1.4rem;
  font-family:"Fira Code","Courier New",monospace;
  mix-blend-mode:normal;
}

.loading-bar{
  width:min(480px,82vw);
  border:1px solid rgba(255,255,255,0.3);
  border-radius:999px;
  padding:0.2rem;
  background:rgba(0,0,0,0.4);
  overflow:hidden;
  box-shadow:0 14px 40px rgba(0,0,0,0.4);
}

.loading-bar .fill{
  display:block;
  height:18px;
  border-radius:999px;
  background:linear-gradient(90deg,#35ffe7,#ffd54f,#ff6f61);
  width:0%;
  animation:barFill 4s cubic-bezier(0.4,0,0.2,1) forwards;
}

.loading-caption{
  margin:0;
  font-size:clamp(1rem,2.4vw,1.4rem);
  letter-spacing:0.22em;
}

.loading-complete .loading-caption{
  color:#ffd54f;
  text-shadow:0 0 18px rgba(255,213,79,0.6);
}

.pixel-teleport{
  background:radial-gradient(circle at center,rgba(12,10,35,0.9),rgba(0,0,0,0.95));
  mix-blend-mode:normal;
}

.pixel-name{
  display:flex;
  gap:0.15em;
  font-size:clamp(1.6rem,3.4vw,2.6rem);
  text-transform:uppercase;
  letter-spacing:0.22em;
  font-family:"Rajdhani","Segoe UI",sans-serif;
}

.pixel-name span{
  display:inline-block;
  animation:pixelAssemble 1.6s ease forwards;
  opacity:0;
  transform:translate3d(0,0,0);
}

.bsov-screen{
  background:#0058d6;
  color:#dce8ff;
  flex-direction:column;
  align-items:flex-start;
  padding:2.4rem clamp(1.6rem,4vw,3.2rem);
  font-family:"Segoe UI",sans-serif;
  mix-blend-mode:normal;
}

.bsov-panel{
  display:flex;
  flex-direction:column;
  gap:0.8rem;
  background:rgba(0,0,0,0.25);
  border:1px solid rgba(255,255,255,0.18);
  border-radius:16px;
  padding:2rem 2.6rem;
  box-shadow:0 30px 70px rgba(0,0,0,0.45);
}

.bsov-face{
  font-size:clamp(2.8rem,6vw,3.8rem);
}

.bsov-panel h2{
  margin:0;
  font-size:clamp(1.4rem,3vw,1.9rem);
  letter-spacing:0.08em;
}

.bsov-panel p{
  margin:0;
  font-size:clamp(1rem,2.3vw,1.2rem);
  opacity:0.9;
}

.bsov-winner{
  margin-top:0.6rem;
  font-weight:700;
  font-size:clamp(1.1rem,2.6vw,1.4rem);
}

.kernel-panic{
  background:#020202;
  color:#f2f2f2;
  font-family:"Fira Code","Courier New",monospace;
  align-items:flex-start;
  padding:2.4rem clamp(1.4rem,4vw,3rem);
  mix-blend-mode:normal;
  overflow:hidden;
  position:relative;
}

.panic-log{
  margin:0;
  line-height:1.5;
  max-width:min(620px,90%);
  white-space:pre-wrap;
  background:rgba(255,255,255,0.05);
  padding:1.4rem 1.8rem;
  border-radius:16px;
  border:1px solid rgba(255,255,255,0.08);
  box-shadow:0 24px 55px rgba(0,0,0,0.55);
}

.panic-hex{
  position:absolute;
  top:-10%;
  font-size:0.75rem;
  color:#00ff90;
  opacity:0.85;
  animation:panicHex 3.4s linear infinite;
}

.compile-success{
  background:linear-gradient(135deg,rgba(10,30,18,0.92),rgba(12,40,30,0.9));
  color:#c9ffd6;
  flex-direction:column;
  gap:1.6rem;
  font-family:"Fira Code","Courier New",monospace;
  mix-blend-mode:normal;
}

.compile-steps{
  display:flex;
  flex-direction:column;
  gap:0.6rem;
}

.compile-step{
  opacity:0;
  padding:0.6rem 1.2rem;
  border-radius:12px;
  background:rgba(0,120,60,0.18);
  border:1px solid rgba(0,180,90,0.25);
  animation:compileReveal 3s forwards;
}

.compile-banner{
  font-weight:700;
  font-size:clamp(1.2rem,3vw,1.8rem);
  letter-spacing:0.18em;
  text-transform:uppercase;
  background:rgba(0,200,120,0.2);
  border:1px solid rgba(0,255,140,0.45);
  padding:0.9rem 1.6rem;
  border-radius:14px;
  text-align:center;
  box-shadow:0 0 32px rgba(0,200,120,0.3);
}

.not-found{
  background:linear-gradient(180deg,rgba(12,12,20,0.92),rgba(6,6,12,0.95));
  color:#ffffff;
  mix-blend-mode:normal;
}

.not-found-card{
  background:rgba(20,20,40,0.9);
  border-radius:28px;
  padding:2.4rem clamp(1.8rem,4vw,3.2rem);
  border:1px solid rgba(255,255,255,0.12);
  text-align:center;
  letter-spacing:0.12em;
  box-shadow:0 34px 70px rgba(0,0,0,0.45);
  animation:notFoundReveal 0.8s ease-out forwards;
}

.not-found-card h1{
  margin:0;
  font-size:clamp(2.4rem,6vw,3.8rem);
}

.not-found-card p{
  margin:0.4rem 0;
}

.not-found-card strong{
  display:block;
  margin-top:1.2rem;
  font-size:clamp(1.6rem,3.6vw,2.2rem);
  color:#ffd54f;
  text-shadow:0 0 18px rgba(255,213,79,0.65);
}

.cloud-deploy{
  background:linear-gradient(180deg,rgba(10,20,40,0.92),rgba(6,10,22,0.95));
  color:#deefff;
  flex-direction:column;
  gap:1.2rem;
  mix-blend-mode:normal;
  position:relative;
}

.deploy-cloud{
  width:min(400px,80vw);
  height:min(200px,42vh);
  background:radial-gradient(circle at 30% 30%,rgba(255,255,255,0.8),rgba(255,255,255,0.15));
  border-radius:50%;
  position:relative;
  box-shadow:0 40px 80px rgba(0,0,0,0.4);
  animation:cloudPulse 6s ease-in-out infinite;
}

.deploy-message{
  font-family:"Fira Code","Courier New",monospace;
  letter-spacing:0.18em;
  font-size:clamp(1rem,2.4vw,1.4rem);
}

.deploy-icon{
  position:absolute;
  top:80%;
  width:34px;
  height:34px;
  border-radius:8px;
  background:linear-gradient(135deg,#6d31ff,#35ffe7);
  box-shadow:0 14px 24px rgba(53,255,231,0.45);
  animation:deployFloat 4s ease-in-out infinite;
}

.wifi-connected{
  background:linear-gradient(135deg,rgba(10,18,50,0.94),rgba(8,10,30,0.96));
  color:#e5f7ff;
  flex-direction:column;
  gap:1.2rem;
  mix-blend-mode:normal;
}

.wifi-bars{
  display:flex;
  align-items:flex-end;
  gap:0.6rem;
}

.wifi-bar{
  width:16px;
  border-radius:6px 6px 0 0;
  background:linear-gradient(180deg,#35ffe7,#1f9eff);
  transform:scaleY(0.1);
  animation:wifiFill 2s ease forwards;
}

.wifi-bar.level-1{height:24px;}
.wifi-bar.level-2{height:36px;}
.wifi-bar.level-3{height:48px;}
.wifi-bar.level-4{height:60px;}

.wifi-caption{
  margin:0;
  font-family:"Fira Code","Courier New",monospace;
  letter-spacing:0.18em;
}

.git-merge{
  background:radial-gradient(circle at center,rgba(10,22,40,0.85),rgba(3,7,12,0.95));
  color:#e8f3ff;
  mix-blend-mode:normal;
  flex-direction:column;
  gap:1.2rem;
  position:relative;
}

.merge-graph{
  position:relative;
  width:min(420px,82vw);
  height:160px;
}

.merge-branch{
  position:absolute;
  width:8px;
  border-radius:8px;
  height:100%;
  background:linear-gradient(180deg,#ff6f61,#ffd54f);
  animation:mergeFlow 3.4s ease-in-out infinite;
}

.merge-left{
  left:25%;
}

.merge-right{
  right:25%;
  background:linear-gradient(180deg,#6d31ff,#35ffe7);
  animation-delay:0.6s;
}

.merge-tag{
  font-family:"Fira Code","Courier New",monospace;
  background:rgba(255,213,79,0.2);
  border:1px solid rgba(255,213,79,0.4);
  padding:0.8rem 1.2rem;
  border-radius:12px;
  letter-spacing:0.18em;
}

.ai-processing{
  background:radial-gradient(circle at center,rgba(8,10,26,0.92),rgba(4,6,14,0.96));
  color:#b5ccff;
  flex-direction:column;
  gap:1.2rem;
  mix-blend-mode:normal;
  position:relative;
}

.ai-network{
  position:absolute;
  inset:12%;
  border-radius:24px;
  border:1px dashed rgba(181,204,255,0.25);
  overflow:hidden;
}

.ai-node{
  position:absolute;
  width:10px;
  height:10px;
  border-radius:50%;
  background:linear-gradient(135deg,#9d65ff,#35ffe7);
  box-shadow:0 0 18px rgba(157,101,255,0.65);
  animation:aiPulse 3s ease-in-out infinite;
}

.ai-label{
  font-family:"Fira Code","Courier New",monospace;
  letter-spacing:0.16em;
  background:rgba(0,150,255,0.16);
  border:1px solid rgba(0,150,255,0.4);
  padding:0.9rem 1.5rem;
  border-radius:14px;
  text-align:center;
  box-shadow:0 0 24px rgba(0,150,255,0.35);
}

.encryption-unlock{
  background:linear-gradient(135deg,rgba(10,18,10,0.94),rgba(6,12,6,0.96));
  color:#cdecd9;
  flex-direction:column;
  gap:1.4rem;
  mix-blend-mode:normal;
  position:relative;
}

.unlock-lock{
  width:min(220px,35vw);
  height:min(220px,35vw);
  border-radius:50%;
  border:3px solid rgba(205,236,217,0.4);
  position:relative;
  animation:unlockPulse 3.2s ease-in-out infinite;
}

.unlock-lock::before,
.unlock-lock::after{
  content:"";
  position:absolute;
  left:50%;
  transform:translateX(-50%);
  background:rgba(205,236,217,0.8);
  border-radius:8px;
}

.unlock-lock::before{
  top:28%;
  width:32px;
  height:80px;
}

.unlock-lock::after{
  bottom:25%;
  width:80px;
  height:48px;
}

.unlock-text{
  margin:0;
  font-family:"Fira Code","Courier New",monospace;
  letter-spacing:0.16em;
  text-align:center;
}

.retro-boot{
  background:radial-gradient(circle at center,rgba(16,8,32,0.92),rgba(4,0,12,0.96));
  color:#44ff9d;
  align-items:flex-start;
  padding:2.6rem clamp(1.6rem,4vw,3.2rem);
  font-family:"VT323","Courier New",monospace;
  mix-blend-mode:normal;
}

.retro-log{
  margin:0;
  font-size:clamp(1.2rem,3.6vw,1.8rem);
  line-height:1.6;
  text-shadow:0 0 18px rgba(68,255,157,0.6);
}

.quantum-collapse{
  background:radial-gradient(circle at center,rgba(14,10,34,0.9),rgba(2,0,12,0.96));
  color:#e7ddff;
  flex-direction:column;
  gap:1.6rem;
  mix-blend-mode:normal;
}

.quantum-waves{
  position:relative;
  width:min(420px,80vw);
  height:200px;
}

.quantum-wave{
  position:absolute;
  inset:0;
  border:2px solid rgba(231,221,255,0.5);
  border-radius:50%;
  animation:quantumWave 3.8s ease-in-out infinite;
}

.quantum-collapse-label{
  font-family:"Fira Code","Courier New",monospace;
  letter-spacing:0.2em;
  text-transform:uppercase;
  padding:0.8rem 1.4rem;
  border-radius:16px;
  background:rgba(157,101,255,0.22);
  border:1px solid rgba(157,101,255,0.35);
}

.server-rack{
  background:linear-gradient(160deg,rgba(8,10,26,0.92),rgba(4,6,18,0.96));
  color:#aeddff;
  flex-direction:column;
  gap:1.2rem;
  mix-blend-mode:normal;
  position:relative;
}

.rack-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(18px,1fr));
  gap:10px;
  width:min(360px,80vw);
}

.rack-led{
  width:100%;
  padding-top:65%;
  border-radius:6px;
  background:rgba(20,30,50,0.85);
  position:relative;
  overflow:hidden;
  animation:rackBlink 3s ease infinite;
}

.rack-caption{
  margin:0;
  font-family:"Fira Code","Courier New",monospace;
  letter-spacing:0.16em;
}

.data-transfer{
  background:radial-gradient(circle at center,rgba(8,22,32,0.88),rgba(2,8,12,0.95));
  color:#cdefef;
  mix-blend-mode:normal;
  position:relative;
}

.transfer-center{
  position:relative;
  padding:1rem 1.6rem;
  border-radius:999px;
  border:1px solid rgba(205,239,239,0.5);
  background:rgba(12,40,60,0.75);
  font-family:"Fira Code","Courier New",monospace;
  letter-spacing:0.2em;
  text-transform:uppercase;
  box-shadow:0 0 24px rgba(205,239,239,0.4);
}

.transfer-beam{
  position:absolute;
  left:50%;
  top:50%;
  width:60vw;
  max-width:700px;
  height:2px;
  background:linear-gradient(90deg,rgba(205,239,239,0.9),rgba(205,239,239,0));
  transform-origin:0 50%;
  transform:rotate(var(--angle,0deg)) scaleX(0);
  animation:beamFlow 2.6s ease-in-out infinite;
}

.docker-whale{
  background:linear-gradient(180deg,rgba(8,26,42,0.94),rgba(4,12,20,0.96));
  color:#d6f1ff;
  flex-direction:column;
  gap:1.2rem;
  mix-blend-mode:normal;
  position:relative;
}

.whale-body{
  position:relative;
  width:min(360px,80vw);
  height:180px;
  background:linear-gradient(135deg,#118cd6,#1fb7ff);
  border-radius:40% 40% 50% 50%;
  box-shadow:0 30px 60px rgba(17,140,214,0.4);
}

.whale-body::after{
  content:"";
  position:absolute;
  left:12%;
  top:35%;
  width:26px;
  height:26px;
  border-radius:50%;
  background:#ffffff;
}

.whale-caption{
  margin:0;
  font-family:"Fira Code","Courier New",monospace;
  letter-spacing:0.16em;
}

.whale-container{
  position:absolute;
  bottom:18%;
  width:36px;
  height:36px;
  border-radius:10px;
  background:linear-gradient(135deg,#ffd54f,#ff6f61);
  animation:containerSplash 4s ease-in-out infinite;
}

.dns-resolve{
  background:radial-gradient(circle at center,rgba(6,8,18,0.95),rgba(2,4,10,0.98));
  color:#c8d9ff;
  flex-direction:column;
  mix-blend-mode:normal;
}

.dns-card{
  background:rgba(20,26,52,0.85);
  border-radius:20px;
  padding:1.8rem clamp(1.4rem,4vw,2.6rem);
  border:1px solid rgba(200,217,255,0.28);
  display:flex;
  flex-direction:column;
  gap:0.6rem;
  box-shadow:0 24px 60px rgba(0,0,0,0.45);
}

.dns-line{
  opacity:0;
  font-family:"Fira Code","Courier New",monospace;
  letter-spacing:0.16em;
  animation:dnsReveal 3s forwards;
}

.firewall-exception{
  background:radial-gradient(circle at center,rgba(30,6,6,0.88),rgba(6,2,2,0.96));
  color:#ffdede;
  flex-direction:column;
  gap:1.4rem;
  mix-blend-mode:normal;
  overflow:hidden;
  position:relative;
}

.firewall-text{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:0.6rem;
  font-family:"Fira Code","Courier New",monospace;
  text-transform:uppercase;
  letter-spacing:0.2em;
}

.firewall-text strong{
  color:#ffb347;
  text-shadow:0 0 24px rgba(255,142,66,0.7);
}

.firewall-flame{
  position:absolute;
  bottom:-10%;
  width:26px;
  height:90px;
  background:linear-gradient(180deg,rgba(255,180,70,0.9),rgba(255,56,80,0));
  border-radius:20px 20px 60px 60px;
  animation:firewallFlame 1.8s ease-in-out infinite;
}

.memory-dump{
  background:radial-gradient(circle at center,rgba(8,8,12,0.96),rgba(0,0,0,0.98));
  color:#91ffe8;
  mix-blend-mode:normal;
  align-items:flex-start;
  padding:2.4rem clamp(1.6rem,4vw,3rem);
  font-family:"Fira Code","Courier New",monospace;
  overflow:hidden;
  position:relative;
}

.memory-log{
  margin:0;
  line-height:1.7;
  background:rgba(20,40,40,0.5);
  border:1px solid rgba(145,255,232,0.35);
  border-radius:16px;
  padding:1.4rem 1.8rem;
  box-shadow:0 24px 50px rgba(0,0,0,0.5);
}

.memory-line{
  position:absolute;
  top:-10%;
  width:1px;
  height:120%;
  background:linear-gradient(180deg,rgba(145,255,232,0),rgba(145,255,232,0.65),rgba(145,255,232,0));
  animation:memoryScan 3s linear infinite;
  opacity:0.45;
}

.powershell-glory{
  background:#012456;
  color:#fffb9a;
  align-items:flex-start;
  padding:2.6rem clamp(1.6rem,4vw,3.4rem);
  font-family:"Consolas","Courier New",monospace;
  mix-blend-mode:normal;
}

.powershell-log{
  margin:0;
  font-size:clamp(1.1rem,2.8vw,1.5rem);
  text-shadow:0 0 14px rgba(255,251,154,0.6);
}

.json-popup{
  background:radial-gradient(circle at center,rgba(6,18,26,0.92),rgba(2,10,14,0.97));
  color:#9ef6ff;
  align-items:flex-start;
  padding:2.4rem clamp(1.6rem,4vw,3rem);
  font-family:"Fira Code","Courier New",monospace;
  mix-blend-mode:normal;
}

.json-body{
  margin:0;
  font-size:clamp(1rem,2.6vw,1.3rem);
  letter-spacing:0.12em;
}

.endgegner-proxy{
  background:radial-gradient(circle at center,rgba(40,0,40,0.92),rgba(8,0,12,0.98));
  color:#f7d7ff;
  flex-direction:column;
  gap:1rem;
  mix-blend-mode:normal;
}

.proxy-skull{
  font-size:clamp(3rem,6vw,4.2rem);
  text-shadow:0 0 24px rgba(255,0,255,0.6);
  animation:skullPulse 2.2s ease-in-out infinite;
}

.proxy-title{
  margin:0;
  font-family:"Press Start 2P","Courier New",monospace;
  font-size:clamp(1.1rem,2.8vw,1.6rem);
  letter-spacing:0.3em;
  text-align:center;
}

.proxy-code{
  margin:0;
  background:rgba(20,0,35,0.7);
  border:1px solid rgba(250,120,250,0.35);
  border-radius:16px;
  padding:1.6rem 2rem;
  box-shadow:0 20px 45px rgba(0,0,0,0.5);
  font-family:"Fira Code","Courier New",monospace;
  line-height:1.8;
}

.cluster-monitor{
  background:linear-gradient(135deg,rgba(4,8,14,0.95),rgba(1,3,7,0.98));
  mix-blend-mode:normal;
  align-items:center;
  justify-content:center;
  font-family:"Fira Code","Courier New",monospace;
  color:#c4f2ff;
}

.cluster-panel{
  width:min(520px,90vw);
  background:rgba(0,20,32,0.75);
  border:1px solid rgba(80,160,190,0.3);
  border-radius:18px;
  box-shadow:0 28px 70px rgba(0,0,0,0.55);
  padding:1.6rem clamp(1.2rem,4vw,2rem);
  display:flex;
  flex-direction:column;
  gap:1rem;
}

.cluster-header{
  display:flex;
  flex-wrap:wrap;
  gap:1rem;
  align-items:center;
  font-size:0.85rem;
  text-transform:uppercase;
  letter-spacing:0.2em;
  color:#8ddcff;
}

.cluster-title{
  font-size:1rem;
  color:#ff6f91;
}

.cluster-table{
  display:flex;
  flex-direction:column;
  gap:0.4rem;
  background:rgba(2,10,18,0.65);
  border-radius:12px;
  padding:0.8rem;
  border:1px solid rgba(120,180,210,0.25);
}

.cluster-row{
  display:grid;
  grid-template-columns:2fr 1fr 0.8fr 1fr;
  gap:0.8rem;
  padding:0.4rem 0.6rem;
  border-radius:8px;
  font-size:0.92rem;
  color:#c4f2ff;
}

.cluster-head{
  font-size:0.75rem;
  text-transform:uppercase;
  letter-spacing:0.18em;
  color:#7fcdf0;
  opacity:0.78;
}

.cluster-row:not(.cluster-head){
  background:rgba(8,24,36,0.65);
  border:1px solid rgba(60,110,150,0.2);
}

.cluster-row.cluster-winner{
  background:rgba(34,180,120,0.28);
  border-color:rgba(34,180,120,0.6);
  color:#e4fff4;
  box-shadow:0 0 24px rgba(34,180,120,0.35);
  animation:clusterGlow 1.6s ease-in-out infinite;
}

.pong-duel{
  background:radial-gradient(circle at center,rgba(2,6,12,0.95),rgba(0,0,0,0.98));
  mix-blend-mode:normal;
  align-items:center;
  justify-content:center;
}

.pong-board{
  position:relative;
  width:min(520px,86vw);
  height:min(260px,46vh);
  border:4px solid rgba(110,150,210,0.6);
  border-radius:18px;
  background:linear-gradient(135deg,rgba(10,20,36,0.92),rgba(4,6,12,0.98));
  box-shadow:0 28px 70px rgba(0,0,0,0.65);
  overflow:hidden;
}

.pong-center-line{
  position:absolute;
  inset:0;
  margin:auto;
  width:4px;
  height:100%;
  background:repeating-linear-gradient(0deg,rgba(140,180,240,0.45),rgba(140,180,240,0.45) 16px,transparent 16px,transparent 32px);
  opacity:0.7;
}

.pong-paddle{
  position:absolute;
  top:72px;
  width:16px;
  height:64px;
  border-radius:8px;
  background:linear-gradient(180deg,#9d65ff,#35ffe7);
  box-shadow:0 0 18px rgba(157,101,255,0.55);
}

.pong-left{
  left:20px;
  animation:pongPaddleLeft 2.8s linear infinite;
}

.pong-right{
  right:20px;
  animation:pongPaddleRight 2.8s linear infinite;
}

.pong-ball{
  position:absolute;
  width:16px;
  height:16px;
  border-radius:50%;
  background:#ffd54f;
  box-shadow:0 0 20px rgba(255,213,79,0.7);
  offset-path:path('M 36 76 L 460 40 L 460 210 L 36 190 Z');
  offset-distance:0%;
  offset-rotate:0deg;
  -webkit-offset-path:path('M 36 76 L 460 40 L 460 210 L 36 190 Z');
  -webkit-offset-distance:0%;
  -webkit-offset-rotate:0deg;
  offset-anchor:center;
  -webkit-offset-anchor:center;
  animation:pongPath 2.8s linear infinite;
}

.pong-hud{
  position:absolute;
  top:18px;
  left:50%;
  transform:translateX(-50%);
  display:flex;
  gap:0.6rem;
  align-items:center;
  font-family:"Press Start 2P","Courier New",monospace;
  font-size:0.9rem;
  color:#b8d9ff;
  letter-spacing:0.2em;
  text-shadow:0 0 18px rgba(184,217,255,0.4);
}

.pong-vs{
  font-size:0.95rem;
  color:#ff6f91;
}

.pong-name{
  position:absolute;
  bottom:24px;
  left:50%;
  transform:translateX(-50%);
  font-family:"Press Start 2P","Courier New",monospace;
  font-size:clamp(1rem,2.6vw,1.6rem);
  letter-spacing:0.24em;
  color:#35ffe7;
  text-shadow:0 0 24px rgba(53,255,231,0.6);
  animation:pongNameGlow 1.6s ease-in-out infinite;
}

.tetris-drop{
  background:radial-gradient(circle at center,rgba(10,18,28,0.95),rgba(0,0,0,0.98));
  align-items:center;
  justify-content:center;
  mix-blend-mode:normal;
}

.tetris-grid{
  position:relative;
  width:min(240px,60vw);
  height:min(432px,70vh);
  padding:6px;
  background:rgba(0,0,0,0.65);
  border:4px solid rgba(120,160,255,0.35);
  border-radius:12px;
  box-shadow:0 30px 70px rgba(0,0,0,0.55);
  display:grid;
  grid-template-columns:repeat(10,1fr);
  grid-template-rows:repeat(18,1fr);
  gap:2px;
  overflow:hidden;
}

.tetris-grid::after{
  content:"";
  position:absolute;
  inset:0;
  background:radial-gradient(circle at top,rgba(120,160,255,0.18),transparent 70%);
  pointer-events:none;
}

.tetris-cell{
  border-radius:4px;
  background:rgba(20,30,50,0.35);
  box-shadow:inset 0 0 4px rgba(0,0,0,0.6);
}

.tetris-piece{
  position:absolute;
  top:0;
  left:0;
  width:calc(4 * (100% / 10));
  height:calc(4 * (100% / 18));
  display:grid;
  grid-template-columns:repeat(4,1fr);
  grid-template-rows:repeat(4,1fr);
  gap:2px;
  color:var(--piece-color,#ffd54f);
  pointer-events:none;
}

.tetris-piece span{
  display:block;
  border-radius:4px;
  box-shadow:0 0 12px rgba(0,0,0,0.45);
  background:currentColor;
  opacity:0;
  transform:scale(0.6);
  animation:tetrisBuild 0.45s ease forwards;
}

.tetris-piece span.hidden{
  visibility:hidden;
  animation:none;
}

.tetris-piece.active.locked{
  animation:none;
}

.tetris-piece.active.locked span{
  animation:none;
  opacity:1;
  transform:scale(1);
}

.tetris-piece.ghost{
  opacity:0.25;
  filter:brightness(1.2);
}

.tetris-piece.ghost span{
  animation:none;
  opacity:1;
  transform:scale(1);
}

.tetris-badge{
  position:absolute;
  top:12%;
  right:12%;
  display:flex;
  flex-direction:column;
  gap:0.4rem;
  padding:1rem 1.4rem;
  border-radius:14px;
  background:rgba(5,15,35,0.92);
  border:1px solid rgba(120,160,255,0.35);
  font-family:"Press Start 2P","Courier New",monospace;
  font-size:0.75rem;
  letter-spacing:0.18em;
  color:#cdd7ff;
  opacity:0;
  transform:translateY(-12px);
  transition:opacity 0.4s ease,transform 0.4s ease;
}

.tetris-badge strong{
  font-size:0.95rem;
  color:#ffd54f;
  text-shadow:0 0 12px rgba(255,213,79,0.55);
}

.tetris-badge.show{
  opacity:1;
  transform:translateY(0);
}

@keyframes starFall{
  0%{transform:translateY(0) translateX(0);opacity:0;}
  10%{opacity:1;}
  100%{transform:translateY(140vh) translateX(15px);opacity:0;}
}

@keyframes balloonRise{
  0%{transform:translate3d(0,0,0);}
  60%{transform:translate3d(var(--drift,0),-80vh,0);}
  100%{transform:translate3d(calc(var(--drift,0) * 1.1),-110vh,0);opacity:0;}
}

@keyframes resultFlash{
  0%{filter:brightness(1);}
  40%{filter:brightness(1.8);}
  100%{filter:brightness(1);}
}

@keyframes boltStrike{
  0%{transform:scaleY(0.1);opacity:0;}
  30%{transform:scaleY(1.05);opacity:1;}
  60%{transform:scaleY(0.65);opacity:0.6;}
  100%{transform:scaleY(0);opacity:0;}
}

@keyframes colorSweep{
  0%{transform:translateX(-100%) skewX(-8deg);opacity:0;}
  30%{opacity:0.85;}
  60%{transform:translateX(0) skewX(0deg);opacity:0.75;}
  100%{transform:translateX(120%) skewX(6deg);opacity:0;}
}

@keyframes matrixFall{
  0%{transform:translateY(-120%);opacity:0;}
  15%{opacity:1;}
  100%{transform:translateY(120%);opacity:0;}
}

@keyframes badgeDrop{
  0%{transform:translateY(-40px) scale(0.9);opacity:0;}
  100%{transform:translateY(0) scale(1);opacity:1;}
}

@keyframes blink{
  0%,100%{opacity:1;}
  50%{opacity:0;}
}

@keyframes breachPulse{
  0%,100%{transform:scale(1);}
  50%{transform:scale(1.06);}
}

@keyframes scanLines{
  0%{background-position:0 0;}
  100%{background-position:0 100%;}
}

@keyframes breachFlash{
  0%{transform:scale(0.3);opacity:1;}
  100%{transform:scale(3.2);opacity:0;}
}

@keyframes nodePulse{
  0%,100%{box-shadow:0 0 30px rgba(0,255,200,0.35);}
  50%{box-shadow:0 0 60px rgba(53,255,231,0.55);}
}

@keyframes dataFlow{
  0%{transform:translateY(-120%);}
  100%{transform:translateY(120%);}
}

@keyframes bitBlast{
  0%{transform:translate3d(0,0,0) scale(0.6);opacity:1;}
  100%{transform:translate3d(var(--tx,40vw),var(--ty,20vh),0) scale(1.1);opacity:0;}
}

@keyframes circuitScan{
  0%{transform:translateX(0);}
  100%{transform:translateX(-20%);}
}

@keyframes labelGlitch{
  0%,100%{transform:translateX(0);}
  20%{transform:translateX(-3px);}
  22%{transform:translateX(3px);}
  24%{transform:translateX(-5px);}
  26%{transform:translateX(2px);}
  50%{transform:translateX(0);}
  70%{transform:translateX(2px);}
  72%{transform:translateX(-2px);}
}

@keyframes barFill{
  0%{width:0%;}
  100%{width:100%;}
}

@keyframes pixelAssemble{
  0%{opacity:0;transform:translate3d(var(--x,0),var(--y,-60px),0) scale(0.4);}
  60%{opacity:1;}
  100%{opacity:1;transform:translate3d(0,0,0) scale(1);}
}

@keyframes panicHex{
  0%{transform:translateY(0);opacity:0;}
  10%{opacity:0.7;}
  100%{transform:translateY(120vh);opacity:0;}
}

@keyframes compileReveal{
  0%{opacity:0;transform:translateY(10px);}
  30%{opacity:1;transform:translateY(0);}
  100%{opacity:1;}
}

@keyframes notFoundReveal{
  0%{transform:scale(0.85) rotateX(12deg);opacity:0;}
  100%{transform:scale(1) rotateX(0deg);opacity:1;}
}

@keyframes cloudPulse{
  0%,100%{transform:scale(1);}
  50%{transform:scale(1.05);}
}

@keyframes deployFloat{
  0%{transform:translateY(0) scale(0.8);opacity:0;}
  20%{opacity:1;}
  60%{transform:translateY(-12vh) scale(1);}
  100%{transform:translateY(-18vh) scale(1.1);opacity:0;}
}

@keyframes wifiFill{
  0%{transform:scaleY(0.1);opacity:0.5;}
  80%{opacity:1;}
  100%{transform:scaleY(1);opacity:1;}
}

@keyframes mergeFlow{
  0%,100%{transform:translateX(0);}
  50%{transform:translateX(12px);}
}

@keyframes aiPulse{
  0%,100%{transform:scale(1);opacity:0.7;}
  50%{transform:scale(1.4);opacity:1;}
}

@keyframes unlockPulse{
  0%,100%{box-shadow:0 0 30px rgba(205,236,217,0.4);}
  50%{box-shadow:0 0 60px rgba(205,236,217,0.7);}
}

@keyframes quantumWave{
  0%{transform:scale(0.6);opacity:0;}
  40%{opacity:0.6;}
  100%{transform:scale(1.5);opacity:0;}
}

@keyframes rackBlink{
  0%,100%{background:rgba(20,30,50,0.85);}
  40%{background:linear-gradient(180deg,#00ff9c,#009fff);}
}

@keyframes beamFlow{
  0%{opacity:0;transform:rotate(var(--angle,0deg)) scaleX(0);}
  40%{opacity:1;transform:rotate(var(--angle,0deg)) scaleX(0.7);}
  100%{opacity:0;transform:rotate(var(--angle,0deg)) scaleX(1.1);}
}

@keyframes containerSplash{
  0%{transform:translateY(0) scale(0.8);opacity:0;}
  30%{opacity:1;}
  60%{transform:translateY(-18vh) scale(1);}
  100%{transform:translateY(-26vh) scale(0.9);opacity:0;}
}

@keyframes dnsReveal{
  0%{opacity:0;transform:translateY(10px);}
  40%{opacity:1;transform:translateY(0);}
  100%{opacity:1;}
}

@keyframes firewallFlame{
  0%{transform:translateY(0) scale(0.8);opacity:0.2;}
  30%{opacity:1;}
  70%{transform:translateY(-20vh) scale(1);}
  100%{transform:translateY(-28vh) scale(1.1);opacity:0;}
}

@keyframes memoryScan{
  0%{transform:translateY(0);}
  100%{transform:translateY(100%);}
}

@keyframes skullPulse{
  0%,100%{transform:scale(1);}
  50%{transform:scale(1.1);}
}

@keyframes clusterGlow{
  0%,100%{box-shadow:0 0 18px rgba(34,180,120,0.25);}
  50%{box-shadow:0 0 32px rgba(34,180,120,0.55);}
}

@keyframes pongPaddleLeft{
  0%,20%{top:72px;}
  40%{top:118px;}
  60%{top:calc(100% - 120px);}
  80%,100%{top:82px;}
}

@keyframes pongPaddleRight{
  0%,20%{top:calc(100% - 124px);}
  40%{top:82px;}
  60%{top:60px;}
  80%,100%{top:calc(100% - 132px);}
}

@keyframes pongPath{
  0%{offset-distance:0%;}
  100%{offset-distance:100%;}
}

@keyframes pongNameGlow{
  0%,100%{text-shadow:0 0 18px rgba(53,255,231,0.45);}  
  50%{text-shadow:0 0 32px rgba(157,101,255,0.65);}  
}

@keyframes tetrisBuild{
  0%{opacity:0;transform:scale(0.6);}  
  100%{opacity:1;transform:scale(1);}  
}

.panel-actions{
  display:flex;
  justify-content:flex-end;
}

.confetti-piece{
  position:absolute;
  width:14px;
  height:20px;
  background:var(--confetti-color,#fff);
  opacity:0.9;
  transform:translate3d(0,-120%,0) rotate(0);
  animation:confettiFall var(--confetti-duration,3.2s) linear forwards;
}

.firework{
  position:absolute;
  width:12px;
  height:12px;
  border-radius:50%;
  background:var(--accent,#ffd54f);
  box-shadow:0 0 18px rgba(255,255,255,0.5);
  opacity:0;
  animation:fireworkBurst var(--fw-duration,1.2s) ease-out forwards;
}

.firework::before,
.firework::after{
  content:"";
  position:absolute;
  inset:-4px;
  border-radius:50%;
  border:2px solid currentColor;
  opacity:0.6;
}

.sparkle-trail{
  position:absolute;
  width:8px;
  height:8px;
  border-radius:50%;
  background:radial-gradient(circle,#fff,rgba(255,255,255,0));
  box-shadow:0 0 18px rgba(255,255,255,0.65);
  opacity:0;
  pointer-events:none;
  transform:translate3d(0,0,0);
  animation:sparkleDrift var(--sparkle-duration,2.8s) ease-out forwards;
}

.cowboy{
  position:fixed;
  bottom:8vh;
  left:-18%;
  display:flex;
  align-items:flex-end;
  gap:0.4rem;
  font-size:clamp(2.8rem,6vw,4.2rem);
  filter:drop-shadow(0 14px 18px rgba(0,0,0,0.45));
  pointer-events:none;
  animation:cowboyRide var(--cowboy-duration,6.5s) ease-in-out forwards;
  z-index:10;
}

.cowboy span{
  display:inline-block;
  transform-origin:bottom center;
  animation:cowboyBounce 0.9s ease-in-out infinite;
}

.cowboy .cowboy-emoji{
  text-shadow:0 6px 12px rgba(0,0,0,0.45);
}

.cowboy .cowboy-horse{
  margin-left:-0.2rem;
  filter:drop-shadow(0 10px 12px rgba(0,0,0,0.35));
}

.cowboy .cowboy-dust{
  width:110px;
  height:14px;
  margin-left:-10px;
  border-radius:50%;
  background:radial-gradient(circle at center,rgba(255,255,255,0.28),rgba(255,255,255,0));
  filter:blur(3px);
  animation:cowboyDust 1.2s ease-out infinite;
}

@keyframes confettiFall{
  0%{
    transform:translate3d(var(--x,0),-120%,0) rotate(0deg);
  }
  100%{
    transform:translate3d(var(--x-end,0),120vh,0) rotate(var(--rotation,360deg));
    opacity:0;
  }
}

@keyframes fireworkBurst{
  0%{transform:translate3d(0,0,0) scale(0.2);opacity:0;}
  15%{opacity:1;}
  60%{opacity:0.9;}
  100%{transform:translate3d(var(--fw-x,0),var(--fw-y,0),0) scale(1.85);opacity:0;}
}

@keyframes sparkleDrift{
  0%{opacity:0;transform:translate3d(var(--sparkle-x,0),var(--sparkle-y,0),0) scale(0.4) rotate(0deg);}
  25%{opacity:1;}
  60%{opacity:0.9;}
  100%{opacity:0;transform:translate3d(var(--sparkle-x-end,0),calc(var(--sparkle-y-end,0) + 40vh),0) scale(1.2) rotate(220deg);}
}

@keyframes cowboyRide{
  0%{transform:translateX(0) scale(0.9);}
  10%{transform:translateX(6vw) scale(1);}
  55%{transform:translateX(calc(60vw)) scale(1.02);}
  100%{transform:translateX(calc(125vw)) scale(0.95);opacity:0;}
}

@keyframes cowboyBounce{
  0%,100%{transform:translateY(0) rotate(0deg);}
  50%{transform:translateY(-6px) rotate(-1.5deg);}
}

@keyframes cowboyDust{
  0%{opacity:0.6;transform:translateX(0) scaleX(1);}
  60%{opacity:0.2;transform:translateX(30px) scaleX(1.4);}
  100%{opacity:0;transform:translateX(50px) scaleX(1.6);}
}

@keyframes resultPulse{
  0%{transform:translateY(18px) scale(0.85);opacity:0;}
  45%{transform:translateY(-4px) scale(1.08);opacity:1;}
  70%{transform:translateY(0) scale(0.98);}
  100%{transform:translateY(0) scale(1);}
}

@media (max-width:720px){
  body{
    padding:1.5rem clamp(1rem,5vw,2rem);
  }

  .app{
    gap:2rem;
  }

  .app__layout{
    flex-direction:column;
  }

  .wheel-frame{
    padding:1.6rem;
    width:min(92vw,460px);
  }

  .app__panel{
    width:100%;
  }
}