* { margin:0; padding:0; box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
html, body { height:100%; }

body {
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  background:#0c1a12; color:#e2e8f0; overflow:hidden;
  user-select:none; -webkit-user-select:none; touch-action:manipulation;
}

#app { position:relative; width:100vw; height:100vh; overflow:hidden; }

#gameCanvas {
  display:block; width:100%; height:100%;
  background:linear-gradient(#87ceeb 0%, #b8e0d2 40%, #6b8f4e 100%);
}

/* ---- HUD ---- */
#hud {
  position:absolute; top:0; left:0; right:0;
  display:flex; align-items:center; gap:14px;
  padding:10px 14px; z-index:5;
  background:rgba(8,20,14,.55); backdrop-filter:blur(4px);
}
.hud-left { font-weight:700; color:#d9f99d; white-space:nowrap; }
.hud-right { display:flex; gap:8px; }
#btnSound {
  background:none; border:none; font-size:1.1rem; cursor:pointer; padding:2px 6px;
}
#hudProgressWrap {
  flex:1; height:12px; background:rgba(255,255,255,.12);
  border-radius:999px; overflow:hidden;
}
#hudProgress {
  height:100%; width:0%;
  background:linear-gradient(90deg,#facc15,#fde047);
  border-radius:999px; transition:width .3s;
}

/* ---- Pantallas ---- */
.screen {
  position:absolute; inset:0; z-index:10;
  display:flex; align-items:center; justify-content:center;
  background:rgba(6,14,10,.72); backdrop-filter:blur(3px);
  padding:16px;
}
.screen.hidden { display:none; }

.panel {
  background:#101d15; border:1px solid #294032; border-radius:16px;
  padding:22px 24px; max-width:560px; width:100%;
  box-shadow:0 20px 60px rgba(0,0,0,.5);
  max-height:92vh; overflow-y:auto;
}

.brand { display:flex; align-items:baseline; gap:10px; margin-bottom:10px; }
.brand h1 { font-size:1.5rem; color:#d9f99d; letter-spacing:.02em; }
.brand span { color:#64748b; font-size:.8rem; text-transform:uppercase; letter-spacing:.12em; }

.subtitle { color:#94a3b8; font-size:.95rem; line-height:1.6; margin-bottom:16px; }

.actions { display:flex; flex-wrap:wrap; gap:10px; align-items:center; margin-top:6px; }

.btn {
  border:none; border-radius:10px; padding:12px 22px;
  font-size:1rem; font-weight:700; cursor:pointer;
  transition:transform .12s, filter .12s;
}
.btn:hover { transform:translateY(-2px); filter:brightness(1.1); }
.btn-primary { background:#65a30d; color:#fff; }
.btn-ghost { background:transparent; color:#94d34a; border:1px solid #365314; }

.finish-stats {
  display:flex; gap:18px; justify-content:center; margin:14px 0 6px; flex-wrap:wrap;
}
.finish-stats .k { font-size:.75rem; color:#64748b; }
.finish-stats .v { font-size:1.3rem; font-weight:700; color:#d9f99d; }

/* ---- AdSense: bloque en intermissions ---- */
.ad-slot {
  margin-top:16px; min-height:90px;
  border:1px dashed #294032; border-radius:10px;
  padding:4px; overflow:hidden;
}
.ad-slot ins { min-height:90px; }

/* Móvil */
@media (max-width:600px) {
  .brand h1 { font-size:1.2rem; }
  .panel { padding:18px 16px; }
  .btn { padding:11px 16px; font-size:.9rem; }
}