/* ===== base ===== */
.container{
  display:flex;
  flex-direction:column;
  min-height:100vh;
  background-image:url("../imagens/Parede.jpg");
  background-size:cover;
  background-position:center;
  background-repeat:repeat;
  font-family:"Press Start 2P", monospace;
}

/* HUD */
.menu{
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap:12px;
  align-items:center;
  padding:8px 18px;
  min-height:96px;
  width:100%;
  background:#000;
  color:#fff;
  border-bottom:5px solid gold;
}
.menu-block{ display:flex; flex-direction:column; align-items:center; justify-content:center; }
.menu-label{ color:red; margin:0; }
.menu h2{ margin:0; }

.lives{ gap:4px; }
.lives-row{ display:flex; align-items:center; gap:8px; }

/* Tabuleiro 3×3 */
.panel{
  padding-top:10px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:flex-start;
  gap:8px;
}
.panel-row{ display:flex; gap:8px; }

.square{
  height:150px;
  width:150px;
  border:1px solid black;
  background-color:#1aeaa5;
  cursor:pointer;
}
.enemy{
  background-image:url(../imagens/ralph.png);
  background-repeat:no-repeat;
  background-position:center;
  background-size:contain;
}

/* Overlays base */
.overlay{
  position:fixed; inset:0; display:grid; place-items:center;
  background:rgba(0,0,0,.75); backdrop-filter:blur(3px); z-index:9999;
}
.overlay.hidden{ opacity:0; pointer-events:none; transition:.25s; }

.card{
  background:linear-gradient(180deg,#6b2d00,#3a1200);
  color:#fff; text-align:center; padding:22px 24px; border-radius:18px;
  width:min(92vw,520px); border:1px solid rgba(255,255,255,.15);
  box-shadow:0 10px 30px rgba(0,0,0,.45);
}
.card h1,.card h2{ text-shadow:2px 2px 0 #000; margin:0 0 .6rem; }
.card .rec{ color:#ffd33d; margin:.2rem 0 1rem; }

.btn{
  border:0; padding:12px 18px; border-radius:14px; cursor:pointer;
  font-family:"Press Start 2P", monospace; font-size:12px;
  background:#ffd33d; color:#000; box-shadow:0 5px 0 #b08900;
  transition:.15s; margin-top:.6rem;
}
.btn:hover{ transform:translateY(-2px); }
.btn.secondary{
  background:#223a6a; color:#fff; border:1px solid rgba(255,255,255,.2); box-shadow:none;
}
.row{ display:flex; gap:.6rem; justify-content:center; }

/* ===== Countdown ===== */
.count-card{
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:8px; padding:24px 28px; border-radius:18px; border:1px solid rgba(255,255,255,.15);
  background:linear-gradient(180deg,#111,#000);
  width:min(92vw,420px);
  box-shadow:0 10px 30px rgba(0,0,0,.45);
}
#cd-number{
  font-size:72px; color:#ffd33d; text-shadow:3px 3px 0 #000;
  line-height:1; margin:0;
}

/* Pulso arcade */
.pulse{
  animation: pulse 0.6s ease both;
}
@keyframes pulse{
  0%   { transform: scale(1);   opacity: .85; }
  45%  { transform: scale(1.5); opacity: 1; }
  100% { transform: scale(1);   opacity: .9; }
}

.cd-sub{ color:#fff; opacity:.85; font-size:14px; }