/* files/style.css */
body {
  margin: 0;
  font-family: Arial, sans-serif;
  background-color: #121212;
  color: #E0E0E0;
}
h1 {
  text-align: center;
  margin-top: 2rem;
}
.container, form, #response { text-align: center; }

.cube-container {
  position: relative;
  width: 200px;
  height: 200px;
  margin: 10rem auto;         /* Default for desktop: large margin */
  perspective: 800px;
}

/* Responsive: on mobile, use smaller top/bottom margins */
@media (max-width: 600px) {
  .cube-container {
    margin: 5rem auto 2rem auto; /* top: 5rem, bottom: 2rem, left/right: auto */
  }
}

.cube {
  width: 200px;
  height: 200px;
  position: absolute;
  top: 0; left: 0;
  transform-style: preserve-3d;
  animation: rotateCube 30s infinite linear;
}
.face {
  position: absolute; width:200px; height:200px;
  border:2px solid #007acc; /* VSCode blue */
  box-shadow:0 0 15px #007acc;
  background: transparent; box-sizing: border-box;
}
.particles {
  position: absolute; width:2px; height:2px;
  top:50%; left:50%; perspective:800px;
  pointer-events:none;
}
.particle {
  position:absolute; width:3px; height:3px;
  background:#007acc;
  border-radius:50%; opacity:0.8;
  animation: moveParticle linear infinite;
}
@keyframes moveParticle {
  0% {transform:translate3d(var(--startX),var(--startY),var(--startZ));opacity:1;}
 100%{transform:translate3d(var(--endX),var(--endY),var(--endZ));opacity:0;}
}
@keyframes spiral-collect {
  0% {transform:translate3d(var(--startX),var(--startY),var(--startZ));opacity:1;}
 100%{transform:translate3d(0,0,0) rotate(720deg);opacity:0;}
}
.particle.spiral-collect { animation: spiral-collect ease-in-out; }

.git-icon {
  width:100px; height:100px;
  position:absolute; top:50%; left:50%;
  transform:translate(-50%,-50%) rotate3d(1,1,1,0deg);
  transform-style: preserve-3d; backface-visibility:hidden;
  animation: rotateIcon 30s infinite linear;
}
@keyframes rotateIcon {
  from {transform:translate(-50%,-50%) rotateX(0deg) rotateY(0deg);}  
  to   {transform:translate(-50%,-50%) rotateX(360deg) rotateY(360deg);}  
}
.face.front  {transform:rotateY(  0deg) translateZ(100px);}  
.face.back   {transform:rotateY(180deg) translateZ(100px);}  
.face.right  {transform:rotateY( 90deg) translateZ(100px);}  
.face.left   {transform:rotateY(-90deg) translateZ(100px);}  
.face.top    {transform:rotateX( 90deg) translateZ(100px);}  
.face.bottom {transform:rotateX(-90deg) translateZ(100px);}  
@keyframes rotateCube {
  from {transform:rotateX(0deg) rotateY(0deg);}  
  to   {transform:rotateX(360deg) rotateY(360deg);}  
}

/* AES form styling */
#keyForm {
  max-width: 300px; margin: 1rem auto;
  background: #1e1e1e; padding:1rem; border-radius:8px;
  box-shadow:0 0 10px rgba(0,122,204,0.5); /* blue shadow */
}
#keyForm label {
  display:block; margin-bottom:0.5rem; font-weight:bold;
  color:#E0E0E0;
}
#keyForm input[type="text"] {
  width:80%; padding:0.5rem; margin-bottom:1rem;
  background:#2e2e2e; border:1px solid #555; color:#E0E0E0;
  border-radius:4px; font-size:1rem;
}
#keyForm button {
  width:100%; padding:0.5rem; background:#007acc; /* VSCode blue */
  border:none; border-radius:4px; color:#fff;
  font-size:1rem; cursor:pointer; transition:background 0.2s;
}
#keyForm button:hover { background:#005f99; }
#response { margin-top:1rem; font-size:0.9rem; text-align:center; }

/* Blurred wobble background at bottom */
.wobble-bg {
  position: fixed;
  left: 50%;
  bottom: -100px;
  transform: translateX(-50%);
  width: 600px;
  height: 300px;
  background: radial-gradient(ellipse at center, #007acc 60%, transparent 100%);
  filter: blur(80px) brightness(1.2);
  opacity: 0.45;
  z-index: 0;
  pointer-events: none;
  animation: wobbleMove 8s ease-in-out infinite alternate;
}

@keyframes wobbleMove {
  0%   { transform: translateX(-50%) scale(1,1) rotate(-2deg);}
  40%  { transform: translateX(-48%) scale(1.5,0.95) rotate(2deg);}
  60%  { transform: translateX(-52%) scale(0.95,1.1) rotate(-3deg);}
  100% { transform: translateX(-50%) scale(1.05,1) rotate(2deg);}
}

.center-content, .cube-container {
  position: relative;
  z-index: 2;
}

#keyForm.red-glow {
  animation: redGlow 0.6s;
}
@keyframes redGlow {
  0%   { box-shadow: 0 0 0px 0px #ff0033; }
  30%  { box-shadow: 0 0 12px 4px #ff0033; }
  70%  { box-shadow: 0 0 12px 4px #ff0033; }
  100% { box-shadow: 0 0 0px 0px #ff0033; }
}

.hex-char-particle {
  position: fixed;
  font-size: 2.2rem;
  font-family: monospace;
  color: #ff0033;
  opacity: 0.85;
  pointer-events: none;
  user-select: none;
  z-index: 1; /* Behind the form */
  left: 0; top: 0;
  will-change: transform, opacity;
  animation: hexCharExplosion 2.2s forwards cubic-bezier(.25,.46,.45,.94);
}

@keyframes hexCharExplosion {
  0% {
    opacity: 1;
    transform: translate(0, 0) scale(1) rotate(0deg);
  }
  20% {
    opacity: 1;
    /* Initial burst outwards */
    transform: translate(var(--x), var(--y)) scale(1.2) rotate(var(--rot));
  }
  60% {
    opacity: 1;
    /* Start falling, still moving outwards */
    transform: translate(var(--x), var(--y2)) scale(1.1) rotate(var(--rot));
  }
  100% {
    opacity: 0;
    /* Fall to bottom of screen */
    transform: translate(var(--xFinal), var(--yFinal)) scale(0.9) rotate(var(--rotEnd));
  }
}

.hex-char-particle.arc-pop {
  position: fixed;
  font-size: 2.2rem;
  font-family: monospace;
  color: #ff0033;
  opacity: 0.92;
  pointer-events: none;
  user-select: none;
  z-index: 1;
  left: 0; top: 0;
  transform: translate(0,0);
  animation: arcPop var(--duration,1.2s) cubic-bezier(.42,0,.58,1) both;
  animation-delay: var(--delay,0s);
}
@keyframes arcPop {
  0% {
    opacity: 0;
    transform: translate(0,0) scale(0.7);
  }
  20% {
    opacity: 1;
    transform: translate(0,0) scale(1.1);
  }
  60% {
    opacity: 1;
    transform: translate(var(--arcX), var(--arcY)) scale(1.1);
  }
  100% {
    opacity: 1;
    transform: translate(var(--arcX), var(--arcY)) scale(1);
  }
}
.hex-char-particle.arc-pop.arc-hide {
  animation: arcHide 0.5s cubic-bezier(.42,0,.58,1) both;
}
@keyframes arcHide {
  0% {
    opacity: 1;
    transform: translate(var(--arcX), var(--arcY)) scale(1);
  }
  60% {
    opacity: 0.7;
    transform: translate(var(--arcBackX), var(--arcBackY)) scale(0.8);
  }
  100% {
    opacity: 0;
    transform: translate(0,0) scale(0.5);
  }
}

.hex-char-particle.simple-pop {
  position: fixed;
  font-size: 2.2rem;
  font-family: monospace;
  color: #ff0033;
  opacity: 0;
  pointer-events: none;
  user-select: none;
  z-index: 1;
  left: 0; top: 0;
  transform: translate(-50%, -50%);
  animation: simplePop var(--duration,0.8s) ease both;
  animation-delay: var(--delay,0s);
}
@keyframes simplePop {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.7);
  }
  20% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1.2);
  }
  80% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.7);
  }
}

.hex-char-particle.pop-up {
  position: fixed;
  font-size: 2.2rem;
  font-family: monospace;
  color: #ff0033;
  opacity: 0;
  pointer-events: none;
  user-select: none;
  z-index: 1;
  left: 0; top: 0;
  transform: translate(-50%, 0) scale(0.7);
  animation: popUpFade var(--duration,0.7s) cubic-bezier(.42,0,.58,1) both;
}
@keyframes popUpFade {
  0% {
    opacity: 0;
    transform: translate(-50%, 0) scale(0.7);
  }
  20% {
    opacity: 1;
    transform: translate(-50%, -10px) scale(1.25);
  }
  60% {
    opacity: 1;
    transform: translate(-50%, -40px) scale(1.1);
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -80px) scale(0.8);
  }
}

.hex-char-hint {
  font-family: monospace;
  font-size: 1.4rem;
  color: #ff0033;
  background: rgba(30,30,30,0.95);
  border-radius: 6px;
  padding: 0.2em 0.7em;
  box-shadow: 0 2px 12px #ff003355;
  opacity: 0;
  animation: hexHintFade 5s forwards;
  pointer-events: none;
  user-select: none;
}
@keyframes hexHintFade {
  0%   { opacity: 0; transform: translate(-50%, 0) scale(0.95);}
  10%  { opacity: 1; transform: translate(-50%, -6px) scale(1.08);}
  80%  { opacity: 1; transform: translate(-50%, -6px) scale(1);}
  100% { opacity: 0; transform: translate(-50%, 0) scale(0.95);}
}

.top-actions {
  position: fixed;
  top: 1.5rem;
  right: 1.5rem;
  z-index: 4;
}

.guide-button {
  background: rgba(0, 122, 204, 0.18);
  border: 1px solid rgba(0, 122, 204, 0.55);
  color: #9fd0ff;
  padding: 0.45rem 1.2rem;
  border-radius: 999px;
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: background 0.2s, border-color 0.2s, box-shadow 0.2s;
  backdrop-filter: blur(6px);
  box-shadow: 0 0 18px rgba(0, 122, 204, 0.22);
  animation: guideButtonGlow 4.5s ease-in-out infinite;
}

.guide-button::before {
  content: "";
  position: absolute;
  top: -45%;
  bottom: -45%;
  left: -70%;
  width: 55%;
  background: linear-gradient(120deg, transparent 0%, rgba(194, 236, 255, 0.7) 45%, rgba(194, 236, 255, 0.35) 60%, transparent 100%);
  transform: translateX(-140%) rotate(18deg);
  animation: guideButtonSwipe 5.5s ease-in-out infinite;
  opacity: 0;
  pointer-events: none;
  mix-blend-mode: screen;
}

.guide-button:hover,
.guide-button:focus {
  background: rgba(0, 122, 204, 0.35);
  border-color: rgba(0, 122, 204, 0.8);
  box-shadow: 0 0 12px rgba(0, 122, 204, 0.5);
  outline: none;
}

.guide-button:active {
  transform: translateY(1px);
}

.guide-button.guide-button--swipe-disabled {
  animation: none;
  box-shadow: 0 0 12px rgba(0, 122, 204, 0.2);
}

.guide-button.guide-button--swipe-disabled::before {
  animation: none;
  opacity: 0;
}

@media (max-width: 600px) {
  .top-actions {
    top: 1rem;
    right: 1rem;
  }

  .guide-button {
    font-size: 0.85rem;
    padding: 0.35rem 1rem;
  }
}

@keyframes guideButtonGlow {
  0%, 65%, 100% {
    box-shadow: 0 0 5px rgba(0, 122, 204, 0.22);
  }
  30% {
    box-shadow: 0 0 15px rgba(123, 207, 255, 0.42);
  }
}

@keyframes guideButtonSwipe {
  0%, 55% {
    transform: translateX(-140%) rotate(18deg);
    opacity: 0;
  }
  65% {
    opacity: 0.8;
  }
  75% {
    transform: translateX(120%) rotate(18deg);
    opacity: 0;
  }
  100% {
    transform: translateX(120%) rotate(18deg);
    opacity: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .guide-button {
    animation: none;
  }
  .guide-button::before {
    animation: none;
    opacity: 0;
  }
}

.guide-modal {
  position: fixed;
  inset: 0;
  background: rgba(6, 10, 20, 0.82);
  display: none;
  align-items: center;
  justify-content: center;
  padding: 2rem;
  z-index: 6;
}

.guide-modal.show {
  display: flex;
}

.guide-modal__content {
  position: relative;
  width: min(520px, 100%);
  background: #1c1f26;
  border-radius: 14px;
  padding: 2rem 2.5rem;
  border: 1px solid rgba(0, 122, 204, 0.38);
  box-shadow: 0 35px 55px rgba(0, 0, 0, 0.65);
}

.guide-modal__close {
  position: absolute;
  top: 0.75rem;
  right: 0.75rem;
  background: transparent;
  border: none;
  color: #b0b0b0;
  font-size: 1.9rem;
  line-height: 1;
  cursor: pointer;
  padding: 0.25rem;
  transition: color 0.2s, transform 0.2s;
}

.guide-modal__close:hover,
.guide-modal__close:focus {
  color: #ffffff;
  transform: scale(1.08);
  outline: none;
}

.guide-modal__intro {
  margin-top: 0.25rem;
  margin-bottom: 1.6rem;
  color: #b9c6d4;
}

.guide-steps {
  min-height: 240px;
}

.guide-step {
  display: none;
  animation: fadeInStep 0.25s ease;
}

.guide-step.active {
  display: block;
}

@keyframes fadeInStep {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.step-badge {
  display: inline-block;
  padding: 0.1rem 0.65rem;
  border-radius: 999px;
  background: rgba(0, 122, 204, 0.2);
  color: #8dc8ff;
  text-transform: uppercase;
  font-size: 0.7rem;
  letter-spacing: 0.06em;
  margin-right: 0.6rem;
}

.guide-step h3 {
  margin-bottom: 0.5rem;
  color: #e0ecf9;
  font-size: 1.15rem;
}

.guide-step p {
  margin: 0 0 1rem;
  line-height: 1.55;
  color: #ccd8e6;
}

.guide-step__media {
  margin: 0 0 1rem;
  text-align: center;
}

.guide-step__media a {
  display: inline-flex;
}

.guide-step__media img {
  max-width: 100%;
  height: auto;
  border-radius: 12px;
  box-shadow: 0 18px 35px rgba(0, 0, 0, 0.45);
}

.guide-step__media + .guide-step__media {
  margin-top: 1.25rem;
}

.guide-modal__footer {
  display: flex;
  justify-content: space-between;
  gap: 0.75rem;
  margin-top: 1.2rem;
}

.guide-modal__nav {
  flex: 1;
  background: #2a2f39;
  border: 1px solid #404855;
  color: #e0e0e0;
  padding: 0.6rem 1.1rem;
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.2s, border-color 0.2s, color 0.2s;
}

.guide-modal__nav:hover:not(:disabled),
.guide-modal__nav:focus-visible {
  background: #373d49;
  border-color: #4f5868;
  outline: none;
}

.guide-modal__nav:disabled {
  opacity: 0.5;
  cursor: default;
}

.guide-modal__nav--primary {
  background: #007acc;
  border-color: #007acc;
  color: #ffffff;
  font-weight: 600;
}

.guide-modal__nav--primary:hover {
  background: #005f99;
  border-color: #005f99;
}

.guide-modal__note {
  margin-top: 1.2rem;
  font-size: 0.85rem;
  color: #99a5b5;
  line-height: 1.4;
}

body.modal-open {
  overflow: hidden;
}

@media (max-width: 520px) {
  .guide-modal {
    padding: 1.5rem;
  }

  .guide-modal__content {
    padding: 1.5rem;
  }

  .guide-modal__footer {
    flex-direction: column;
  }

  .guide-modal__nav {
    width: 100%;
  }
}

/* Force ESP Web Tools UI into a dark palette */
ewt-install-dialog {
  color-scheme: dark;
  --text-color: rgba(255, 255, 255, 0.8);
  --md-sys-color-primary: #03a9f4;
  --md-sys-color-on-primary: #00131f;
  --md-sys-color-on-surface: #f4f4f4;
  --md-sys-color-on-surface-variant: #c7c7c7;
  --md-sys-color-on-secondary-container: #f4f4f4;
  --md-sys-color-surface: #121212;
  --md-sys-color-surface-container: #171717;
  --md-sys-color-surface-container-high: #1f1f1f;
  --md-sys-color-surface-container-highest: #262626;
  --md-sys-color-secondary-container: #1d1d1d;
  --md-menu-container-color: var(--md-sys-color-surface-container-high);
  --md-list-container-color: var(--md-sys-color-surface-container);
  --md-dialog-container-color: var(--md-sys-color-surface-container-high);
}