* {
  box-sizing: border-box;
  font-family: Arial, sans-serif;
}

html,
body {
  margin: 0;
  width: 100%;
  height: 100%;
}

/* Full screen green background */
body {
  background: #6cc56c;
}

/* Main container */
.inner-panel {
  width: 100vw;
  height: 100vh;
  position: relative;
}

/* Top buttons (eyes) */
.top-inputs {
  position: absolute;
  top: 12%;
  left: 0;
  width: 100%;
  display: flex;
  justify-content: space-between;
  padding: 0 10vw;
}

.eye {
  position: relative;
  overflow: hidden;
  background: white;
  border: none;
  width: 180px;
  height: 50px;
  font-size: 22px;
  cursor: pointer;
}

/* Eyelid */
.eye::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 0%;
  background: #6cc56c;
  /* page background */
  z-index: 2;
  transition: height 0.25s ease-in-out;
}

/* Blink active */
.eye.blink::before {
  height: 100%;
}


.eye.left {
  color: red;
}

.eye.right {
  color: blue;
}

/* Explore button */
.mouth {
  position: absolute;
  bottom: 22%;
  left: 50%;
  transform: translateX(-50%);
  background: white;
  border: none;
  width: 320px;
  height: 70px;
  font-size: 32px;
  color: yellow;
  cursor: pointer;
}

/* Colors will now come from JavaScript */
.eye,
.mouth {
  background: white;
  border: none;
  cursor: pointer;
}

/* Pixelated effect */
.pixelate {
  filter: contrast(200%) saturate(80%);
  image-rendering: pixelated;
  transform: scale(1.02);
}

/* Calm transition */
.eye,
.mouth {
  transition:
    color 0.6s ease,
    filter 0.3s steps(4),
    transform 0.3s ease;
}

/* Pixel container */
.pixel-clone {
  position: fixed;
  display: grid;
  pointer-events: none;
  z-index: 9999;
}


/* Individual pixels */
.pixel {
  background: currentColor;
  opacity: 1;
  transition:
    transform 0.6s ease,
    opacity 0.6s ease;
}

/* Full screen pixel overlay */
.screen-pixelate {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: inherit;
  pointer-events: none;
  z-index: 998;
  opacity: 0;
  filter: contrast(180%) saturate(90%);
  image-rendering: pixelated;
  transition: opacity 0.6s ease;
}



/* Configurator icon */
#configBtn {
  position: fixed;
  right: calc(16px + env(safe-area-inset-right));
  bottom: calc(16px + env(safe-area-inset-bottom));

  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: none;
  background: rgba(255, 255, 255, 0.85);
  color: #111;
  font-size: 18px;
  cursor: pointer;
  z-index: 10000;

  opacity: 0.5;
  transition: opacity 0.25s ease, transform 0.25s ease;
}

@media (max-width: 768px) {
  #configBtn {
    width: 32px;
    height: 32px;
    font-size: 16px;
  }
}

#configBtn:hover {
  opacity: 1;
  transform: rotate(20deg);
}

/* Configurator help text */
.config-help {
  position: fixed;
  right: calc(16px + env(safe-area-inset-right));
  bottom: calc(64px + env(safe-area-inset-bottom));

  background: rgba(0, 0, 0, 0.7);
  color: #fff;
  padding: 8px 12px;
  border-radius: 6px;
  font-size: 13px;

  opacity: 0;
  pointer-events: none;
  transform: translateY(6px);
  transition: opacity 0.25s ease, transform 0.25s ease;

  z-index: 10001;
}

/* Visible state */
.config-help.show {
  opacity: 1;
  transform: translateY(0);
}