/* springdeck - Etapa 0 (scaffold do palco)
 *
 * Travas CSS (CLAUDE.md 3):
 *   - sem custom properties (var(--x))
 *   - sem clip-path, sem Grid
 *   - todo transform/animation leva o par -webkit-
 *   - cor da CENA vem de JS paint(); aqui so o esqueleto do palco
 */

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  background: #000;
  overflow: hidden;
}

/* area total da tela; tudo fora do palco fica neste tom */
#sd-root {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: #05060a;
  overflow: hidden;
}

/* caixa do palco no tamanho real (320*fit x 200*fit).
   left/top/width/height sao definidos pelo JS (layout()). */
#sd-stage {
  position: absolute;
  left: 0;
  top: 0;
  width: 320px;
  height: 200px;
  overflow: hidden;
  background: #11131f;
}

/* grade de design 320x200; escala inteira via -webkit-transform: scale(fit) */
#sd-stage-inner {
  position: absolute;
  left: 0;
  top: 0;
  width: 320px;
  height: 200px;
  -webkit-transform-origin: 0 0;
  -moz-transform-origin: 0 0;
  -o-transform-origin: 0 0;
  transform-origin: 0 0;
  -webkit-transform: scale(1);
  -moz-transform: scale(1);
  -o-transform: scale(1);
  transform: scale(1);
}

/* camada padrao: ocupa a grade inteira */
.sd-layer {
  position: absolute;
  left: 0;
  top: 0;
  width: 320px;
  height: 200px;
}

/* HUD de diagnostico */
#sd-hud {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  font: 12px/16px monospace;
  color: #7dff9b;
  background: rgba(0, 0, 0, 0.55);
  padding: 2px 6px;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

/* chuva: gota cai de -12px ate passar do palco (320x200), loop.
   CLAUDE.md 3: todo @keyframes/animation leva o par -webkit-. */
@-webkit-keyframes sd-rain-fall {
  0%   { -webkit-transform: translateY(0); }
  100% { -webkit-transform: translateY(188px); }
}
@keyframes sd-rain-fall {
  0%   { transform: translateY(0); }
  100% { transform: translateY(188px); }
}
.sd-rain-drop {
  -webkit-animation-name: sd-rain-fall;
  -webkit-animation-duration: 0.7s;
  -webkit-animation-timing-function: linear;
  -webkit-animation-iteration-count: infinite;
  animation-name: sd-rain-fall;
  animation-duration: 0.7s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}