/* ==========================================================================
   Spring Deck V2 - estilo base
   Alvo: Samsung Galaxy Tab 3 / Android 4.2.2 (WebKit 534.30), paisagem.
   Regras:
     - Nenhuma CSS custom property (var()): nao existe no Android 4.2.
       Todas as cores sao aplicadas por JS (app.js -> paint()).
     - Todo transform/animation tem par -webkit-.
     - Aqui fica so a ESTRUTURA. Geometria dos pixels tambem vem do JS.
   ========================================================================== */

/* Fonte pixel VGA (IBM PC / code page 437). Arquivo TTF local — WOFF nao e
   confiavel no WebKit 534, TTF sim. Colocar o arquivo em:
     spring-deck-v2/spring-deck-v2/fonts/PerfectDOSVGA437.ttf
   Sem o arquivo, cai no fallback "Lucida Console"/"Courier New". */
@font-face {
  font-family: "Perfect DOS VGA 437";
  src: url("fonts/PerfectDOSVGA437.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
}

html, body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  background: #000;
  overflow: hidden;
  -webkit-text-size-adjust: none;
  -webkit-tap-highlight-color: rgba(0,0,0,0);
}

* {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

#sd-viewport {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: #000;
}

/* O palco vive em coordenadas fixas 320x200.
   Nada aqui dentro e responsivo: a escala e aplicada no proprio palco. */
#sd-stage {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 320px;
  height: 200px;
  overflow: hidden;
  /* transform completo (translate + scale) e escrito por app.js */
  -webkit-transform: translate(-50%, -50%) scale(1);
     -moz-transform: translate(-50%, -50%) scale(1);
      -ms-transform: translate(-50%, -50%) scale(1);
          transform: translate(-50%, -50%) scale(1);
  -webkit-transform-origin: center center;
          transform-origin: center center;
  /* pixel art: evita suavizacao ao escalar (cada browser tem seu nome) */
  image-rendering: -webkit-optimize-contrast;
  image-rendering: crisp-edges;
  image-rendering: pixelated;
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
}

/* Todo pixel/retangulo da cena. Posicao e tamanho vem do JS. */
.p {
  position: absolute;
  left: 0;
  top: 0;
}

.hide { display: none !important; }

/* --- Animacoes ----------------------------------------------------------
   Somente transform / opacity: sao as duas propriedades que o compositor
   antigo trata sem reflow. Nenhuma animacao cria ou destroi elementos.    */

@-webkit-keyframes sd-rain-fall {
  0%   { -webkit-transform: translateY(-12px); }
  100% { -webkit-transform: translateY(176px); }
}
@keyframes sd-rain-fall {
  0%   { transform: translateY(-12px); }
  100% { transform: translateY(176px); }
}

@-webkit-keyframes sd-neon-pulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: .72; }
}
@keyframes sd-neon-pulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: .72; }
}

/* Cauda: dois quadros desenhados na grade que so trocam de opacidade.
   Sem rotacao -> nada de borrao sub-pixel no WebKit antigo do tablet.
   Corte seco (sem interpolacao) para o pixel nunca ficar meio-transparente. */
@-webkit-keyframes sd-tail-a {
  0%, 49.999% { opacity: 1; }
  50%, 100%   { opacity: 0; }
}
@keyframes sd-tail-a {
  0%, 49.999% { opacity: 1; }
  50%, 100%   { opacity: 0; }
}
@-webkit-keyframes sd-tail-b {
  0%, 49.999% { opacity: 0; }
  50%, 100%   { opacity: 1; }
}
@keyframes sd-tail-b {
  0%, 49.999% { opacity: 0; }
  50%, 100%   { opacity: 1; }
}

.sd-rain-drop {
  -webkit-animation: sd-rain-fall .7s linear infinite;
          animation: sd-rain-fall .7s linear infinite;
}

.sd-tail-a {
  -webkit-animation: sd-tail-a 1.6s linear infinite;
          animation: sd-tail-a 1.6s linear infinite;
}
.sd-tail-b {
  -webkit-animation: sd-tail-b 1.6s linear infinite;
          animation: sd-tail-b 1.6s linear infinite;
}

/* Neon synthwave. O filter e ignorado no Android 4.2 (degrada para
   pulsacao de opacidade apenas), o que e exatamente o desejado. */
.sd-neon {
  -webkit-animation: sd-neon-pulse 2.6s ease-in-out infinite;
          animation: sd-neon-pulse 2.6s ease-in-out infinite;
}
.sd-neon-glow {
  -webkit-filter: drop-shadow(0 0 2px currentColor);
          filter: drop-shadow(0 0 2px currentColor);
}

/* O gato herda a escala do palco e aplica um fator PROPRIO por cima.
   Esse fator tem de ser INTEIRO: a pixel art do gato e desenhada em blocos
   de 1px (app.js -> CAT_BODY_*), e a escala do palco no hardware alvo ja e
   inteira (3x / 4x). Um fator fracionario (o antigo 1.6) multiplicava tudo
   por ~4.8 / ~6.4 e quebrava a grade - linhas de 1px viravam ~1.6px e
   surgiam costuras entre blocos.
   Fator 2 mantem a grade exata. Como transform-origin e "left bottom", a
   base do grupo do gato fica fixa e ele so cresce para cima e para a
   direita. O grupo e posicionado (app.js -> buildCats, top=123) para que
   essa base caia em y=152, exatamente sobre o topo do peitoril, com a
   sombra de contato alinhada sob as patas (buildGlassAndSill). */
.sd-cat {
  -webkit-transform: scale(2);
          transform: scale(2);
  -webkit-transform-origin: left bottom;
          transform-origin: left bottom;
}

/* --- Fase 2: camada de UI temporal (relogio / data / countdown) --------
   Fica DENTRO de #sd-stage, portanto herda a mesma escala do palco e
   trabalha em coordenadas 320x200. Nao altera a geometria do cenario:
   e apenas texto sobreposto, sem fundo e sem captura de toque.
   Fonte: stack monospace do proprio sistema (sem Google Fonts, sem asset).
   Legibilidade sobre o ceu: sombra dura de 1px (sem blur), estilo pixel. */
#sd-time {
  position: absolute;
  left: 0;
  top: 0;
  width: 320px;
  height: 200px;
  pointer-events: none;
  z-index: 30;
  font-family: "Perfect DOS VGA 437", "Lucida Console", "Courier New", monospace;
  -webkit-font-smoothing: none;
}

#sd-time > div { position: absolute; }

/* --- Relogio + data + clima: canto inferior direito, estilo relogio de PC
   Bloco de 3 linhas, grade de 2 colunas alinhadas a direita, fim em x=276.
   Escala tipografica de DOIS tamanhos, padronizada em todos os itens:
     VALOR  (hora, temp) .... 8px bold  #eef2ff   -> col direita  x232-276 (44)
     ROTULO (data, condicao,
             fase da lua) .... 7px       #9aa6d0   -> col esquerda x140-226 (86)
   Ritmo vertical fixo de 10px:  linha1 top120 / linha2 top130 / lua top141.
   Sombra dura unica (1px 1px) em tudo. 24h, sem segundos (so no countdown). */
/* CANTO INFERIOR DIREITO: hora (maior) + data (menor), empilhadas,
   alinhadas a direita, direto sobre a moldura escura - sem card. */
#sd-clock {
  left: 196px;
  top: 176px;
  width: 118px;
  text-align: right;
  font-size: 11px;
  line-height: 11px;
  font-weight: bold;
  letter-spacing: 0;
  color: #fff4fc;
  text-shadow: 1px 1px 0 #160b2d;
}

#sd-date {
  left: 196px;
  top: 189px;
  width: 118px;
  text-align: right;
  font-size: 8px;
  line-height: 8px;
  letter-spacing: 1px;
  color: #39d9ff;
  text-shadow: 1px 1px 0 #160b2d;
}

/* --- Countdown: informacao textual PRINCIPAL da tela -------------------
   Centrado horizontalmente, alto da composicao (acima do gato e das
   colinas; so o ceu/nuvens por tras). Sem card, sem caixa, sem borda:
   texto pixel art sobre o cenario, com SOMBRA DURA (sem blur) para
   contraste em day / sunset / night / chuva / tempestade.
   4 colunas iguais de 52px (208px no total) -> cabe folgado ate 3 digitos
   de dias ("199" ~ 40px < 52px) em 320x200.                              */
#sd-countdown {
  left: 0;
  top: 30px;
  width: 320px;
  text-align: center;
}
/* font-size:0 no container zera o espaco em branco entre os inline-block,
   entao as 4 colunas somam exatamente 208px e ficam centradas. */
#sd-cd-cols { font-size: 0; }
.sd-cd-col {
  display: inline-block;
  width: 52px;
  vertical-align: top;
}
.sd-cd-v {
  display: block;
  font-size: 24px;
  line-height: 26px;
  font-weight: bold;
  letter-spacing: 0;
  color: #fff4fc;
  text-shadow:
    1px 1px 0 #160b2d, -1px 1px 0 #160b2d,
    1px -1px 0 #160b2d, -1px -1px 0 #160b2d,
    2px 2px 0 #6c2bd9;
}
.sd-cd-k {
  display: block;
  font-size: 7px;
  line-height: 8px;
  letter-spacing: 1px;
  color: #ff71ce;
  text-shadow: 1px 1px 0 #160b2d;
}
#sd-cd-done {
  display: none;
  font-size: 20px;
  line-height: 24px;
  font-weight: bold;
  letter-spacing: 2px;
  color: #ffd166;
  text-shadow:
    1px 1px 0 #160b2d, -1px 1px 0 #160b2d,
    1px -1px 0 #160b2d, -1px -1px 0 #160b2d,
    2px 2px 0 #6c2bd9;
}

/* --- Fase 4: camada textual de clima (temperatura / condicao) ----------
   Mesma logica da camada de tempo: vive DENTRO de #sd-stage, herda a
   escala do palco, coordenadas 320x200, sem fundo e sem captura de toque.
   Discreta: fica junto do relogio, no canto inferior direito, sem
   competir com o countdown nem com o gato. Coordenadas inteiras. */
#sd-weather {
  position: absolute;
  left: 0;
  top: 0;
  width: 320px;
  height: 200px;
  pointer-events: none;
  z-index: 30;
  font-family: "Perfect DOS VGA 437", "Lucida Console", "Courier New", monospace;
  -webkit-font-smoothing: none;
}

#sd-weather > div { position: absolute; }

/* Junto do relogio: canto inferior direito, mesma coluna alinhada a
   direita (fim em x=276). Discreto, nao compete com o countdown. */
/* CANTO INFERIOR ESQUERDO: temperatura (maior) + condicao, empilhadas,
   alinhadas a esquerda, direto sobre a moldura escura - sem card. */
#sd-temp {
  left: 6px;
  top: 167px;
  width: 140px;
  text-align: left;
  font-size: 11px;
  line-height: 11px;
  font-weight: bold;
  letter-spacing: 0;
  color: #ffd166;
  text-shadow: 1px 1px 0 #160b2d;
}

#sd-condition {
  left: 6px;
  top: 180px;
  width: 180px;
  text-align: left;
  font-size: 7px;
  line-height: 8px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: #ff8a3d;
  text-shadow: 1px 1px 0 #160b2d;
}

/* --- Fase 5: texto da fase lunar (#sd-moon-info) -----------------------
   Mesma logica das camadas de tempo e clima: dentro de #sd-stage, herda a
   escala do palco, coordenadas 320x200, sem fundo e sem captura de toque.
   Prioridade visual MINIMA: 3a linha do bloco, mesmo tamanho de rotulo
   (7px) mas cor ainda mais apagada. Alinhado a direita em x=276. */
/* Fase lunar: texto discreto, integrado ao bloco climatico (canto inferior
   esquerdo), abaixo da condicao. Sem card e sem icone - a lua fisica ja
   esta evidente no ceu. Prioridade visual MINIMA. */
#sd-moon-info {
  position: absolute;
  left: 6px;
  top: 190px;
  width: 180px;
  text-align: left;
  white-space: nowrap;
  overflow: hidden;
  pointer-events: none;
  z-index: 30;
  font-family: "Perfect DOS VGA 437", "Lucida Console", "Courier New", monospace;
  -webkit-font-smoothing: none;
  font-size: 7px;
  line-height: 7px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: #9a8ad0;
  text-shadow: 1px 1px 0 #160b2d;
}

/* --- Painel de teste (#ui) ---------------------------------------------- */
#sd-ui {
  display: none;
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  padding: 4px 6px;
  background: rgba(0,0,0,.72);
  color: #eee;
  font: 11px/1.6 "Perfect DOS VGA 437", "Lucida Console", "Courier New", monospace;
  z-index: 999;
}
#sd-ui.on { display: block; }
#sd-ui label { margin-right: 8px; white-space: nowrap; }
#sd-ui select { font-size: 11px; }
#sd-ui button {
  margin-left: 8px;
  font: inherit;
  font-size: 11px;
  cursor: pointer;
}
#sd-ui button.sd-ui-arrow {
  margin: 0 2px;
  padding: 0 5px;
  font-weight: bold;
  line-height: 1.3;
}

/* --- Controle MANUAL de tela cheia (#sd-fullscreen) --------------------
   Vive DENTRO de #sd-stage: herda a escala do palco e usa coordenadas
   inteiras 320x200. Canto superior direito, sobre a faixa escura da
   moldura da janela - fora do caminho do countdown (centro, y30), do
   gato (base esquerda), do clima e do relogio (coluna inferior direita).
   Estilo pixel art / monospace: sem radius moderno, sem blur, sem
   animacao, sem card. z-index acima de toda a cena (camadas de texto
   usam z 30). A visibilidade e controlada por JS (SpringDeckFullscreen):
   escondido quando nao ha suporte e escondido dentro do fullscreen.     */
#sd-fullscreen {
  display: none;
  position: absolute;
  left: 246px;
  top: 3px;
  width: 66px;
  height: 12px;
  margin: 0;
  padding: 0;
  z-index: 40;
  font-family: "Perfect DOS VGA 437", "Lucida Console", "Courier New", monospace;
  font-size: 7px;
  line-height: 12px;
  letter-spacing: 1px;
  text-align: center;
  color: #dfe4f5;
  background: rgba(6, 8, 20, 0.72);
  border: 1px solid #4a4f70;
  border-radius: 0;
  -webkit-border-radius: 0;
  text-shadow: 1px 1px 0 #05060f;
  -webkit-font-smoothing: none;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  cursor: pointer;
}

/* --- Tela 2: painel-terminal do tempo (#sd-screen2) --------------------
   Camada OPACA dentro de #sd-stage: herda a escala do palco e usa
   coordenadas inteiras 320x200 (NAO cria um 2o sistema de escala). Desliza
   de fora da direita por cima da cena parada. z acima de tudo (as camadas
   de texto usam z 30, o botao de tela cheia z 40).
   AQUI so a ESTRUTURA e o movimento: sem border-radius, sem filter, sem
   box-shadow animado. As CORES (fundo, texto, moldura, scanlines, vinheta)
   NAO ficam no CSS - vem do paint() da propria IIFE (mesma convencao do
   resto do projeto: WebKit 534 nao tem var() do CSS).
   Escondida por padrao via translateX(100%) COM par -webkit-. */
#sd-screen2 {
  position: absolute;
  left: 0;
  top: 0;
  width: 320px;
  height: 200px;
  overflow: hidden;
  z-index: 50;
  font-family: "Perfect DOS VGA 437", "Lucida Console", "Courier New", monospace;
  -webkit-font-smoothing: none;
  -webkit-transform: translateX(100%);
     -moz-transform: translateX(100%);
      -ms-transform: translateX(100%);
          transform: translateX(100%);
  -webkit-transition: -webkit-transform .28s ease;
          transition: -webkit-transform .28s ease, transform .28s ease;
}

/* Linhas de texto do layout: posicionadas em coordenadas 320x200 inteiras,
   sem quebra (white-space:pre), fonte herdada (stack DOS acima). */
#sd-screen2 .s2-line {
  position: absolute;
  white-space: pre;
  font-size: 7px;
  line-height: 7px;
  letter-spacing: 0;
}

/* Moldura estilo caixa DOS: retangulos de 1px pintados por JS. */
#sd-screen2 .s2-rule {
  position: absolute;
  font-size: 0;
  line-height: 0;
}

/* Overlay de scanlines CRT: cobre a folha inteira, nao captura toque.
   O background (gradiente 1px transparente / 1px preto translucido) e
   aplicado por paint(); sem blur, sem curvatura. */
#sd-s2-crt {
  position: absolute;
  left: 0;
  top: 0;
  width: 320px;
  height: 200px;
  pointer-events: none;
  z-index: 2;
}